import { Text, View } from '../../../components/Themed';
import React, { useEffect } from 'react'
import { StyleSheet } from 'react-native';
import { Auth } from 'aws-amplify';
import { useIsFocused } from '@react-navigation/native';
import { router } from 'expo-router';
import { ArrowRightIcon, Button, ButtonIcon, ButtonText, VStack } from '@gluestack-ui/themed';
import { globalStyles } from '../../../constants/styles';


async function signOut(){
  try{
    await Auth.signOut();
    console.log("Sign out successful");
    router.replace('/');
  }catch(error){
    console.log("Error signing out: ", error);
  }
}

const index = () => {
  const [user, setUser] = React.useState(null)
  const [email, setEmail] = React.useState(null)
  const [result, setResult] = React.useState(null)
  const [name, setName] = React.useState(null)
  const isFocused = useIsFocused();


  useEffect(() => {
    console.log("PROFILE: GETTING USER INFO")
    Auth.currentAuthenticatedUser().then((user) => setResult(user['attributes'])).catch((err) => console.log(err))
  }, [isFocused])//Called when switched to screen and when leaving. Come back to only call when switched to screen

  useEffect(() => {
    // console.log("TEST 2", result)
    if(result){
      console.log("PROFILE: SETTING USER VARIABLES")
      setEmail(result['email'])
      setName(result['name'])
    }
  }, [result])
  // console.log(result)

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Profile</Text>
      {/* <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" /> */}
      <View style={styles.separator} darkColor="rgba(255,255,255,0.1)" />
      <Text style={styles.title}>{email}</Text>
      <Text style={styles.title}>{name}</Text>


      <VStack>
        <Button
          style={globalStyles.profileButton}
          borderRadius={30}
          size="lg"
          bg="#4fb2ab"
          sx={{
            ":active": {
              bg: "#00ACB5D5",
            },
          }}
          onPress={() => {
            signOut();
          }}
        >
          <ButtonText flex={1} textAlign='center'>Sign Out</ButtonText>
        </Button>
      </VStack>
      
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});


export default index