import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import { globalStyles } from '../../constants/styles';
import { Alert, AlertIcon, AlertText, ArrowRightIcon, Button, ButtonIcon, ButtonText, CloseCircleIcon, HStack, Heading, Input, InputField, KeyboardAvoidingView, VStack, set } from '@gluestack-ui/themed';
import  Colors  from '../../constants/Colors';
import { router, useLocalSearchParams } from 'expo-router';
import { Auth } from 'aws-amplify';


type Params={
  email:string,
}

const verifyEmail = () => {

  const {email} = useLocalSearchParams<Params>();
  const [verificationCode, setVerificationCode] = React.useState('');
  const [showAlert, setShowAlert] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState("The verification code you entered is invalid. Please try again.");
  const [isLoading, setIsLoading] = React.useState(false);

  console.log(email)

  async function confirmSignUp() {
    try {
      console.log("Veryfying email: "+email)
      await Auth.confirmSignUp(email, verificationCode);
      console.log("Verification successful");
      setIsLoading(false);
      router.push({
        pathname: "/signupName",
        // params: { email: email },
      });
    } catch (error) {
      console.log("error confirming sign up", error);
      if (error instanceof Error) {
        setIsLoading(false);
        setErrorMessage(error.message);
      } else {
        setErrorMessage("An unknown error occurred. Please try again.");
      }
      setShowAlert(true);
    }
  }

  return (
    <KeyboardAvoidingView
      style={[
        globalStyles.container,
        { flex: 1, justifyContent: "space-between" },
      ]}
    >
      <SafeAreaView>
        <VStack style={{ flex: 1 }}>
          <Heading
            size="2xl"
            style={[globalStyles.heading, styles.headingUpdate]}
          >
            {" "}
            Enter the code we sent to{" "}
            <Heading
              size="2xl"
              style={[
                globalStyles.heading,
                styles.headingUpdate,
                globalStyles.cyanText,
                { alignSelf: "center" },
              ]}
            >
              {email}
            </Heading>{" "}
          </Heading>
          <Input
            borderWidth={0}
            size="xl"
            style={globalStyles.verificationInput}
            isFullWidth
          >
            <InputField
              alignSelf="center"
              fontSize={35}
              width={200}
              type="password"
              fontWeight="bold"
              maxLength={6}
              keyboardType="numeric"
              textAlign="center"
              placeholder="• • • • • •"
              color={Colors["dark"].redText}
              placeholderTextColor={Colors["dark"].redText}
              cursorColor={Colors["dark"].redText}
              onChangeText={(text) => setVerificationCode(text)}
            />
          </Input>

          {showAlert ? (
            <Alert
              action="error"
              margin={5}
              marginTop={10}
              borderColor={Colors["dark"].red}
              backgroundColor={Colors["dark"].alertBackground}
              borderWidth={1}
              borderRadius={10}
              padding={5}
            >
              <HStack>
                <AlertIcon
                  color={Colors["dark"].red}
                  padding={5}
                  as={CloseCircleIcon}
                  size="xl"
                  mr="$3"
                  mx="$2.5"
                />
                <AlertText color={Colors["dark"].text} padding={5}>
                  {errorMessage}
                </AlertText>
              </HStack>
            </Alert>
          ) : null}
        </VStack>

        <VStack>
          <Button
            style={globalStyles.bottomButton}
            borderRadius={30}
            size="xl"
            bg="#4fb2ab"
            sx={{
              ":active": {
                bg: "#00ACB5D5",
              },
            }}
            onPress={() => {
              console.log(email);
              setIsLoading(true);
              // router.push({ pathname: '/signupName', params: { email:email['email'] } })
              confirmSignUp();
            }}
          >
            {isLoading ? (
              <ButtonText flex={1}>Verifying...</ButtonText>
            ) : (
              <ButtonText flex={1}>Continue</ButtonText>
            )}

            <ButtonIcon size="xl" as={ArrowRightIcon} />
          </Button>
        </VStack>
      </SafeAreaView>
    </KeyboardAvoidingView>
  );
}

export default verifyEmail

const styles = StyleSheet.create({
  headingUpdate:{
    marginLeft:0,
    paddingLeft:0,
  },
  fineTune:{
    padding:5,
    width:300,
    alignSelf:'center',
    textAlign:'center',
    marginBottom:10,
  },

})