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

const register = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const router = useRouter();

    const handleRegister = () => {
        const user = {
            name: name,
            email: email,
            password: password,
        }
        axios.post("http://localhost:3030/register", user).then((res) => {
            console.log(res);
            Alert.alert("Registration succeeded!");
            setEmail('');
            setPassword('');
            setName('');
        }).catch((error) => {
            Alert.alert("Registration failed!");
            console.log("error", error);
        })
    }

  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}}>Register</Text>  
            </View>

            <View style={{marginTop: 50}}>
                <View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5}}>
                    <AntDesign name="user" size={16} color="#31363F" />
                    <TextInput value={name} onChangeText={(text) => setName(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Username'/>
                </View>
                <View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5, marginTop: 10}}>
                    <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: 50}}/>

                <Pressable onPress={handleRegister} style={{backgroundColor: "#61677A", padding:10, borderRadius:5, alignItems: "center"}}>
                    <Text style={{color: "#D8D9DA", fontSize: 16, fontWeight: 600}}>Register</Text>
                </Pressable>

                <Pressable onPress={() => router.replace("/login")} style={{marginTop: 10}}>
                    <Text style={{fontSize: 12, textAlign:"center"}}>Already have an account? <Text style={{fontWeight: 700}}>Login</Text></Text>
                </Pressable>
            </View>
        </KeyboardAvoidingView>
    </SafeAreaView>
  )
}

export default register

const styles = StyleSheet.create({})