import React, { memo, useState } from 'react';
import { TouchableWithoutFeedback } from 'react-native';

import { SBox } from '../../common/s-components/layout/s-box';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { Icon } from '../../common/components/icon';
import { TUserData } from '../../auth/types';

type TProps = {
  onBackPress: () => void;
  userData?: TUserData;
};

export const UserCard: React.FC<TProps> = memo(props => {
  const { onBackPress, userData } = props;
  const [pressed, setPressed] = useState(false);
  // const { pressed } = this.state;
  const { userName } = userData!;

  return (
    <SBox position="relative" width={1}>
      <SBox mt={65}>
        <SBox mx={52}>
          <SH1 textAlign="center" lineHeight="24px" numberOfLines={1}>
            {`Hi, ${userName}!`}
          </SH1>
        </SBox>
        <SH3 textAlign="center" lineHeight="24px" mt={41}>
          Let&apos;s setup your account.
        </SH3>
      </SBox>
      <SBox
        width={32}
        height={32}
        position="absolute"
        top={61}
        left={22}
        style={{ opacity: pressed ? 0.7 : 1 }}
      >
        <TouchableWithoutFeedback
          testID="user-card"
          onPress={onBackPress}
          onPressIn={() => {
            setPressed(true);
          }}
          onPressOut={() => {
            setPressed(false);
          }}
        >
          <Icon name="ios-back" size={32} color="white" />
        </TouchableWithoutFeedback>
      </SBox>
    </SBox>
  );
});

UserCard.defaultProps = {
  userData: {
    userName: '',
    userLastName: '',
    email: '',
    jobCategory: '',
  },
};