import { StyleSheet, View } from 'react-native'
import React, { createRef, useContext, useRef } from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import { globalStyles } from '../../constants/styles';
import { Alert, AlertIcon, AlertText, ArrowRightIcon, Button, ButtonIcon, ButtonSpinner, ButtonText, CloseCircleIcon, EyeIcon, EyeOffIcon, HStack, Heading, Input, InputField, InputIcon, InputSlot, KeyboardAvoidingView, VStack, set } from '@gluestack-ui/themed';
import  Colors  from '../../constants/Colors';
import WelcomeInput from '../../components/welcomeInput';
import { TextInput } from 'react-native-gesture-handler';
import { updatePassword } from '../../components/authHelpers';
import { router } from 'expo-router';

const UpdatePassword = () => {
    const [password, setPassword] = React.useState('');
    const [confirmPassword, setConfirmPassword] = React.useState('');
    const [showAlert, setShowAlert] = React.useState(false);
    const [isValid, setIsValid] = React.useState(false);
    const [isLoading, setIsLoading] = React.useState(false);
    const [alertMessage, setAlertMessage] = React.useState("The email you entered is not a valid email address. Please try again.");
    const [showPassword, setShowPassword] = React.useState(false);
    let confirmPassRef = createRef<TextInput>();

    async function onSubmit() {
        //Checks to make sure passwords match
        if(password !== confirmPassword){
            setAlertMessage("Passwords do not match. Please try again.");
            setShowAlert(true);
            return;
        }

        updatePassword(password).catch((error) => {
            setIsLoading(false);
            if(error instanceof Error){
                setShowAlert(true);
                setAlertMessage(error.message);
            }

            router.back()
        })
        setIsLoading(true);
        setShowAlert(false);
    }

    function handleEye(){
        setShowPassword((showState) => {
            return !showState;
        });
    }

    return (
        <KeyboardAvoidingView style={globalStyles.container}>
            <SafeAreaView style={{ flex: 1, justifyContent: "space-between" }}>
                <VStack>
                    <Heading
                        size="2xl"
                        style={[globalStyles.heading, styles.headingUpdate]}
                    >
                        New Password
                    </Heading>

                    <HStack space="sm">
                        <View style={{ width: "80%" }}>
                        <WelcomeInput
                            maxLength={20}
                            type={showPassword ? "text" : "password"}
                            placeholder="Your Password"
                            style={styles.input}
                            onChangeText={(text) => {
                                setPassword(text);
                            }}
                            autoFocus={true}
                            numberOfLines={1}
                            returnKeyType="next"
                            blurOnSubmit={false}
                            onSubmitEditing={() => {
                                if (
                                    confirmPassRef !== null &&
                                    confirmPassRef.current !== null
                                ) {
                                    confirmPassRef.current.focus();
                                }
                                }}
                        >
                        </WelcomeInput>
                        </View>
                        <Button
                            onPress={handleEye}
                            size="xl"
                            maxWidth="10%"
                            style={styles.eye}
                        >
                        <ButtonIcon style={{ alignSelf: "center" }} as={EyeIcon} />
                        </Button>
                    </HStack>
                            
                    <Heading
                        size="2xl"
                        style={[globalStyles.heading, styles.headingUpdate]}
                    >
                    Confirm new password pls
                    </Heading>
                            
                    <HStack space="sm">
                        <View style={{ width: "80%" }}>
                        <WelcomeInput
                            maxLength={20}
                            style={styles.input}
                            type={showPassword ? "text" : "password"}
                            placeholder="Confirm it here"
                            returnKeyType="next"
                            ref={confirmPassRef}
                            onChangeText={(text) => {
                                setConfirmPassword(text);
                                if (password) {
                                    setIsValid(true);
                                }
                            }}
                        />
                        </View>
                        
                        <Button
                            onPress={handleEye}
                            size="xl"
                            maxWidth="10%"
                            style={styles.eye}
                        >
                            <ButtonIcon style={{ alignSelf: "center" }} as={EyeIcon} />
                        </Button>
                    </HStack>
                        
                    {showAlert && (
                        <Alert
                            action="error"
                            style={globalStyles.welcomeAlert}
                        >
                        <HStack>
                            <AlertIcon
                                color={Colors["dark"].red}
                                padding={5}
                                as={CloseCircleIcon}
                                size="xl"
                                mr="$3"
                                mx="$2.5"
                            />
                                <AlertText color={Colors["dark"].text} padding={5}>
                                    {alertMessage}
                                </AlertText>
                        </HStack>
                        </Alert>
                    )}
                </VStack>
                
                <VStack>
                    <Button
                        style={globalStyles.bottomButton}
                        borderRadius={30}
                        isDisabled={!isValid}
                        size="xl"
                        bg="#4fb2ab"
                        sx={{
                            ":active": {
                                bg: "#00ACB5D5",
                            },
                        }}
                        onPress={() => {
                        onSubmit();
                        }}
                    >
                        {isLoading ? (
                            <ButtonText flex={1}>Updating...</ButtonText>
                        ) : (
                            <ButtonText flex={1}>Continue</ButtonText>
                        )}

                        {isLoading&&<ButtonSpinner ml={'auto'} />}
                        {!isLoading&&<ButtonIcon size="xl" as={ArrowRightIcon} />}


                    </Button>
                </VStack>
            </SafeAreaView>
        </KeyboardAvoidingView>
    );
}

export default UpdatePassword

const styles = StyleSheet.create({
    headingUpdate:{
        marginLeft:10,
        paddingLeft:0,
    },
    fineTune:{
        padding:5,
        width:300,
        alignSelf:'center',
        textAlign:'center',
        marginBottom:10,
    },
    input:{
        width: '90%',
        marginLeft:10
    },
    eye:{
        backgroundColor:Colors.dark.tabBg,
        justifyContent:'center',
    },
})