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 } from '@gluestack-ui/themed';
import  Colors  from '../../constants/Colors';
import { router } from 'expo-router';
import WelcomeInput from '../../components/welcomeInput'; 
import { Auth } from 'aws-amplify';



const signupEmail = () => {
  const [showAlert, setShowAlert] = React.useState(false);
  const [displayName, setDisplayName] = React.useState('');

  async function onsubmit() {
    try{
      const user = await Auth.currentAuthenticatedUser();
      const result = await Auth.updateUserAttributes(user, {
        'name': displayName,
      });
      console.log("Update Successful: "+result);
      router.replace('/home')
    }catch(error){
      console.log("Error updating user: "+error);
    }
  }

  return (
    <KeyboardAvoidingView style={[globalStyles.container, styles.containerFix]}>
      <SafeAreaView style={{ flex: 1, justifyContent: "space-between", width:'100%'}}>
        <VStack style={{ flex: 1 }}>
          <Heading
            size="2xl"
            style={[globalStyles.heading, styles.headingUpdate]}
          >
            Please enter a display name:
          </Heading>

          <WelcomeInput 
          style={globalStyles.nameInput} 
          placeholder="Your Display Name"
          maxLength={25}
          onChangeText={(text) => setDisplayName(text)}
          />

        </VStack>

        <View>
          <VStack>
            <Button
              style={globalStyles.bottomButton}
              borderRadius={30}
              size="xl"
              bg="#4fb2ab"
              sx={{
                ":active": {
                  bg: "#00ACB5D5",
                },
              }}
              onPress={() => {
                onsubmit();
              }}
            >
              <ButtonText flex={1}>Continue</ButtonText>
              <ButtonIcon size="xl" as={ArrowRightIcon} />
            </Button>
          </VStack>
        </View>

      </SafeAreaView>
    </KeyboardAvoidingView>
  );
}

export default signupEmail

const styles = StyleSheet.create({
	headingUpdate:{
    marginLeft:15,
    paddingLeft:0,
  },
  fineTune:{
    padding:5,
    width:300,
    alignSelf:'center',
    textAlign:'center',
    marginBottom:10,
  },
  containerFix:{
    alignItems:'flex-start',
  },
})