import { StyleSheet, Text, View, SafeAreaView, KeyboardAvoidingView, Image, TextInput, Pressable } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Fontisto } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";

const login = () => {
    const router = useRouter();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    useEffect(() => {
        const checkLoginStatus = async() => {
            try {
                const token = await AsyncStorage.getItem("authToken");
                if(token){
                    router.replace("/(tabs)/home")
                }
            } catch (error) {
                console.log(error)
            }
        };
        checkLoginStatus();
    }, [])

    const handleLogin = () => {
        const user = {
            email: email,
            password: password,
        };
        axios.post("http://localhost:3030/login", user).then((res) => {
            const token = res.data.token;
            AsyncStorage.setItem("authToken", token);
            router.replace("/(tabs)/home")
        })
    };
    


  return (
    <SafeAreaView style={{flex:1, backgroundColor: "white", alignItems: "center", justifyContent:"center"}}>
        <View>
            <View style={{alignItems: "center"}}>
                <Image 
                    style={{width: 150, height: 150, resizeMode: "containe"}}
                    source={{
                    uri:"./assets/images/logo.png",
                    }}
                />
            </View>    
            <Text style={{fontSize: 24, fontWeight: 600, color: "#222831", marginTop: 20}}>Keep Tracking</Text>
        </View>
        <KeyboardAvoidingView>
            <View style={{alignItems: "center"}}>
               <Text style={{fontSize: 16, fontWeight: 600, color: "black", marginTop: 20}}>Welcome back!</Text>  
            </View>
            <View style={{marginTop: 50}}>
                <View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5}}>
                    <Fontisto name="email" size={16} color="#31363F" />
                    <TextInput value={email} onChangeText={(text) => setEmail(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your email'/>
                </View>  
                <View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5, marginTop: 10}}>
                    <Entypo name="key" size={16} color="#31363F" />
                    <TextInput value={password} onChangeText={(text) => setPassword(text)} secureTextEntry={true} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your password'/>
                </View> 
                <View style={{marginTop:10}}>
                    <Text style={{color: "#61677A", fontSize: 12 }}>Forgot password?</Text>
                </View>
                <View style={{marginTop: 50}}/>
                <Pressable onPress={handleLogin} style={{backgroundColor: "#61677A", padding:10, borderRadius:5, alignItems: "center"}}>
                    <Text style={{color: "#D8D9DA", fontSize: 16, fontWeight: 600}}>Login</Text>
                </Pressable>
                <Pressable onPress={() => router.replace("/register")} style={{marginTop: 10}}>
                    <Text style={{fontSize: 12, textAlign:"center"}}>Don't have an account? <Text style={{fontWeight: 700}}>Register</Text></Text>
                </Pressable>
            </View>
        </KeyboardAvoidingView>
    </SafeAreaView>
  )
}

export default login

const styles = StyleSheet.create({})