import { View, Text } from "../../components/Themed";
import { StyleSheet } from "react-native";
import Colors from "../../constants/Colors";
import global from "../../constants/global";
import constants from 'expo-constants'
import { Button, ButtonIcon, ButtonText, Input, InputField } from "@gluestack-ui/themed";
import { useEffect, useState } from "react";
import validateEmail from "../../components/validateEmail";
import { sendRecovery } from "../../components/authHelpers";
import { ButtonSpinner } from "@gluestack-ui/themed";
import { ArrowRightIcon } from "@gluestack-ui/themed";
import { router } from "expo-router";

export default function ForgotPassword(){
    const [recoverySent, setRecover] = useState(false)
    const [email, setEmail] = useState('')
    const [valid, setValid] = useState(false)
    const [isLoading, setLoading] = useState(false)

    //Validates email
    useEffect(()=>{
        if(validateEmail(email)){
            setValid(true)
        }else{
            setValid(false)
        }
    },[email])

    if(!recoverySent){
        return(
            <View style={styles.container}>
                <View style={styles.content}>
                    <Text style={styles.title} >What is the email for your account?</Text>
    
                    <Input
                        variant="underlined"
                        size="lg"
                        borderColor={Colors.dark.cyan}
                        $focus-borderColor={Colors.dark.red}
                        sx={{
                            _input:{
                                color:Colors.dark.redBright
                            }
                        }}
                    >
                        <InputField 
                            color={Colors.dark.redBright} 
                            placeholder='Email'

                            onChangeText={(text)=>{
                                setEmail(text)
                            }} 
                        />
                    </Input>
    
    
                    <Button style={styles.button}
                        onPress={()=>{
                            console.log("Sending recovery email for:",email)
                            setLoading(true)
                            sendRecovery(email.replaceAll(' ','')).then(()=>{
                                setRecover(true)
                                setLoading(false)
                            }).catch((error)=>{
                                console.error("Error sending recovery email:",error)
                                setLoading(false)
                            })
                        }}
                        isDisabled={!valid}
                    >
                        {!isLoading?<ButtonText>
                            Send Recovery
                        </ButtonText>:<ButtonText>
                            Sending...
                        </ButtonText>}

                        {isLoading&&<ButtonSpinner ml={'auto'} />}
                        {!isLoading&&<ButtonIcon ml='auto' size="xl" as={ArrowRightIcon} />}
                    </Button>
                
                </View>
            </View>
        )
    }else{
        return(
            <View style={styles.container}>
                <View style={styles.content}>

                    <Text style={styles.message} >
                        An email has been sent to reset your password. 
                        Please follow the link then login
                    </Text>

                    <Button style={styles.button}
                        onPress={()=>{
                                router.replace('/')
                            }
                        }
                    >
                        <ButtonText>
                            Go to Login
                        </ButtonText>

                        <ButtonIcon ml='auto' as={ArrowRightIcon}/>
                    </Button>

                </View>
            </View>
        )
    }
    
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:Colors.dark.tabBg,
        alignItems:'center'
    },
    content:{
        flex:1,
        // marginTop:constants.statusBarHeight,
        backgroundColor:Colors.dark.tabBg,
        padding:15,
        marginTop:global.height*0.3,
        width:global.width*0.95,
    },
    title:{
        fontWeight:'bold',
        fontSize:22,
        color:Colors.dark.text
    },
    button:{
        marginTop:20,
        backgroundColor:Colors.dark.cyan
    },
    message:{
        fontSize:18,
        color:Colors.dark.text,
        textAlign:'left'
    }

})