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 } from 'expo-router';
import { Auth } from 'aws-amplify';
import { useForm, Controller } from "react-hook-form";
import validateEmail from '../../components/validateEmail';
import  { alert } from '../../components/alert';

function generateRandomPassword(length:number=8) {
  let password ="";
  let charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let num = '0123456789';

  for (let i = 0; i < length; i+=2) {
    password += charset.charAt(Math.floor(Math.random() * charset.length));
    password += num.charAt(Math.floor(Math.random() * num.length));
  }

  console.log("generated password: ", password)
  return password;
}

const signupEmail = () => {
  const [email, setEmail] = React.useState('');
  const [showAlert, setShowAlert] = React.useState(false);
  const [isValid, setIsValid] = React.useState(false);
  const [alertMessage, setAlertMessage] = React.useState("The email you entered is not a valid email address. Please try again.");

  // async function signUp(username: string, email: string, password: string) {
  //   try {
  //     const { user } = await Auth.signUp({
  //       username,
  //       password,
  //       attributes: {
  //         email,
  //       },
  //       autoSignIn: {
  //         enabled: true,
  //       },
  //     });
  //     console.log(user);
  //     setIsLoading(false);
  //     router.push({
  //       pathname: "/verifyEmail",
  //       params: { email: email },
  //     });
  //   } catch (error) {
  //     console.log("error signing up:", error);
  //     setIsLoading(false);
  //     setIsValid(false);
  //     setShowAlert(true);
  //     if (error instanceof Error) {
  //       setIsLoading(false);
  //       setIsValid(false);
  //       setAlertMessage(error.message);
  //     } else {
  //       setAlertMessage("An unknown error occurred. Please try again.");
  //     } 
  //   }
  // }

  async function onSubmit() {
    if (validateEmail(email) === false) {
      console.log("Email is Not Correct");
      setShowAlert(true);
      setAlertMessage("The email you entered is not a valid email address. Please try again.");
      setIsValid(false);
    } else {
      console.log("Email is Correct");
      setShowAlert(false);
      router.push({
        pathname: "/signupPassword",
        params: { email: email },
      });
      // const user = await signUp(email, emaiq 12544l,generateRandomPassword());
    }

    

  }

  return (
    <KeyboardAvoidingView style={globalStyles.container}>
      <SafeAreaView style={{ flex: 1, justifyContent: "space-between" }}>
        <VStack style={{ flex: 1 }}>
          <Heading
            size="2xl"
            style={[globalStyles.heading, styles.headingUpdate]}
          >
            Let's get an email for your account:
          </Heading>

          <View style={globalStyles.welcomeInputContainer}>
          <Input borderWidth={0} size="xl" style={[globalStyles.welcomeInput]}>
            <InputField
              fontSize={25}
              type="text"
              style={globalStyles.welcomeInput}
              maxLength={50}
              scrollEnabled={false}
              inputMode="email"
              autoFocus={true}
              keyboardType="email-address"
              fontWeight="bold"
              placeholder="Your Email"
              color={Colors["dark"].redText}
              placeholderTextColor={Colors["dark"].redText}
              cursorColor={Colors["dark"].redText}
              onChangeText={(text) => {
                setEmail(text); 
                if(validateEmail(text) === true){
                  setIsValid(true);
                }else{
                  setIsValid(false);
                }
              }}
              onSubmitEditing={() => {onSubmit()}}
              returnKeyType="next"
              value={email}
              multiline={true}
              enterKeyHint='next'
            />
          </Input>
          </View>

          {showAlert &&
            <View style={{width:'100%'}}>
            <Alert
              action="error"
              margin={5}
              marginTop={10}
              borderColor={Colors["dark"].red}
              backgroundColor={Colors["dark"].alertBackground}
              borderWidth={1}
              borderRadius={10}
              padding={5}
              width="100%"
            >
              <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>
            </View>}

        </VStack>

        <Text style={[globalStyles.text, styles.fineTune]}>
          By clicking "Continue", you agree to our Privacy policy and Terms of
          Service.
        </Text>
        <VStack>
          <Button
            style={globalStyles.bottomButton}
            borderRadius={30}
            isDisabled={!isValid}
            size="xl"
            bg="#4fb2ab"
            sx={{
              ":active": {
                bg: "#00ACB5D5",
              },
            }}
            onPress={() => {
              onSubmit();
            }}
          >
          
            <ButtonText flex={1}>Continue</ButtonText>
            <ButtonIcon size="xl" as={ArrowRightIcon} />
          </Button>
        </VStack>
      </SafeAreaView>
    </KeyboardAvoidingView>
  );
}

export default signupEmail

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

})