import React, {useState} from 'react'
import { View, Text, Image, StyleSheet, useWindowDimensions, ScrollView, Alert, TextInput } from 'react-native'
import Logo  from '../../../assets/images/logo-main.png'
import CustomButton from '../../components/CustomButton/CustomButton';
import CustomInput from '../../components/CustomInput/CustomInput';
import { useNavigation } from '@react-navigation/native';

import {useForm} from 'react-hook-form';

import { Auth } from 'aws-amplify';

const LoginScreen = () => {

    const [loading, setLoading] = useState(false);
    const {height} = useWindowDimensions();
    const {control, handleSubmit, formState: { errors } } = useForm();
    const navigation = useNavigation();

    const onLoginPressed = (data) => {
        console.log(data, errors)
        // if (loading) {
        //     return;
        // }
        // setLoading(true);
        // try {
        //     response = await Auth.signIn(data.username, data.password);
        //     console.log(response);
        // } catch(e) {
        //     Alert.alert('Opps', e.message);
        // }
        // setLoading(false);
    };

    const onForgotPasswordPressed = () => {
        navigation.navigate('ForgotPassword');
    }

    const onRegisterPressed = () => {
        navigation.navigate('Register')
    }

  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }} showsVerticalScrollIndicator={false}>
        <View style={styles.root}>
        <Image source={Logo} style={[styles.logo, {height : height * 0.2}]} resizeMode={'contain'} />

        <CustomInput name='username' placeholder='Username' control={control} />
        <CustomInput password='password' placeholder='Password' secureTextEntry={true} control={control}/>

        <TextInput placeholder='Password'/>

        <CustomButton text={loading ? 'Loading...' : 'Login Account'} onPress={handleSubmit(onLoginPressed)} />
        <CustomButton text='Forgot Password?' onPress={onForgotPasswordPressed} type='TERTIARY' />
        <CustomButton text="Don't have an account? Create one" onPress={onRegisterPressed} type='TERTIARY' />
        </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
    root: {
        alignItems: 'center',
        padding: 20,
    },

    logo: {
        width: 200,
        maxWidth: 300,
        maxHeight: 300,
    },
});

export default LoginScreen;