import { FC, useState } from 'react';
import { View } from 'react-native';
import { NavigationProp } from '@react-navigation/native';

import { Header, Input, Button, BigText, PageWrapper } from '../../components';

import { ButtonVariants } from '../../types/components';
import { storageSet } from '../../storage';
import { NAVIGATION_PAGES } from '../../types';

import { usePostLogin } from '../../modules/auth/api/queries/use-post-login';

type Props = {
  navigation: NavigationProp<any>;
};

const LoginScreen: FC<Props> = ({ navigation }) => {
  const [login, setLogin] = useState('');
  const [pass, setPass] = useState('');

  const { data, refetch } = usePostLogin({ login, pass }, false);

  if (data) {
    if (data.token) {
      storageSet('token', data.token);
    }
  }

  return (
    <PageWrapper>
      <Header label={'Login'} />
      <View style={{ gap: 15 }}>
        <BigText>Welcome back</BigText>
        <Input
          header={'Email address'}
          placeholder={'Email or login'}
          inputMode={'email'}
          onChange={(e) => setLogin(e)}
        />
        <Input
          header={'Password'}
          isPrivate={true}
          placeholder={'Login'}
          onChange={(e) => setPass(e)}
        />
      </View>
      <View style={{ gap: 30, marginTop: '5%' }}>
        <Button
          variant={ButtonVariants.TEXT}
          onPress={() => navigation.navigate(NAVIGATION_PAGES.RESET_PASSWORD)}
        >
          Forgot password
        </Button>
        <Button onPress={() => refetch()}>Login</Button>
      </View>
    </PageWrapper>
  );
};

export default LoginScreen;