import { View, Text, SafeAreaView, TextInput, Button} from 'react-native'
import React, { useEffect, useState } from 'react'
import { useAuth } from './contexts/AuthContext'
import { Redirect } from 'expo-router';
import { FontAwesome } from "@expo/vector-icons";
import { Input } from '../components';

export default function login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("")
  const {authState, onLogin} = useAuth();
  // const {authState, onLogin} = useAuth();
  // useEffect(() => {
  //   login()
  // }, [])


  const login = async() => {
    await onLogin!(email, password);
  }


  return (
      
      <SafeAreaView style={{flex: 1, justifyContent: "center"}}>
        {authState?.authenticated && 
        <Redirect href={"/"}></Redirect>}
          <Input
              placeholder={'Email'}
              label='Email or Username'
              leftIcon={<FontAwesome name="user" size={20} />}
              onChangeHandler={setEmail}
          />
          <Input
              placeholder={'Enter Password'}
              label='Password'
              leftIcon={<FontAwesome name="key" size={20} />}
              onChangeHandler={setPassword}
              secure = {true}
          />
          <Button title='login' onPress={login}></Button>
      </SafeAreaView>
      
  );
}