import { Link, Redirect, router } from 'expo-router';
import { GluestackUIProvider, Text, Box, Heading, Input, Button, Center, View, ButtonText, Divider, ButtonIcon, ArrowRightIcon } from '@gluestack-ui/themed';
import { config } from '@gluestack-ui/config';
import { BackHandler, StyleSheet } from 'react-native';
import { globalStyles } from '../constants/styles';
import { useFocusEffect } from "@react-navigation/native";

import { Amplify } from 'aws-amplify';
import awsExports from '../aws-exports';
import { SafeAreaView } from 'react-native-safe-area-context';
import React from 'react';
import AuthLoadingScreen from '../components/authLoading';


Amplify.configure(awsExports);
// Amplify.Logger.LOG_LEVEL = 'debug';


export default function StartPage() {

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        return true;
      };

      BackHandler.addEventListener("hardwareBackPress", onBackPress);

      return () =>
        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
    }, [])
  );

  return (
    <GluestackUIProvider config={config}>
      {/* <Redirect href="/home" /> */}
      <AuthLoadingScreen />
      <SafeAreaView style={[globalStyles.container]}>
        <Heading style={[globalStyles.heading, {marginTop:0}]} size='2xl'>Welcome to <Heading size='3xl' style={globalStyles.cyanText}>Sherlock</Heading>!</Heading>
        <Heading style={globalStyles.subHeading} size='md'>Your local <Heading size='xl' style={[globalStyles.subHeading, globalStyles.redText]}>Investigator</Heading></Heading>
        
        <Divider 
        my='$3' 
        w={200}
        bg='rgba(255,255,255,0.25)'
        />
        <View style={styles.middle}>
          {/* Middle content */}
        </View>


        <Link href="/signupEmail" asChild>
        <Button
          borderRadius={30}
          size='xl'
          bg='#4fb2ab'
          mb={10}
          h={70}
          w={300}
          sx={{
            ":active": {
              bg: "#00ACB5D5",
            },
          }}
        >
          <ButtonText flex={1} >Get Started</ButtonText>
          <ButtonIcon size='xl' as={ArrowRightIcon}/>
        </Button>
        </Link>


        <Button
          variant='link'
          mb={50}
          onPress={() => {router.push('/login')}}
        >
          <ButtonText>Have an account? Login</ButtonText>
        </Button>

        
      </SafeAreaView>
      

    </GluestackUIProvider>
  )};

const styles = StyleSheet.create({
  getStartedButton:{
    width:'50%',
    justifyContent:'flex-start',
  },
  buttonText:{
    textAlign:'center',
    alignItems:'center',
  },
  middle:{
    flex:1,
  }
});