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

export default function login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("")
  const {authState, onLogin} = useAuth()
  const backgroundColor = useThemeColor("backgroundColor")
  const textColor = useThemeColor("primaryText");
  const elementDefaultColor = useThemeColor("elementDefaultColor")


  // const {authState, onLogin} = useAuth();
  // useEffect(() => {
  //   login()
  // }, [])


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


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