import React, { useEffect } from 'react';
import { Pressable, StyleSheet, TouchableOpacity } from 'react-native';
import { View, Text } from '../../components/Themed';
import Colors from '../../constants/Colors';
import { Link, useLocalSearchParams } from 'expo-router';
import { HStack, Toast, ToastDescription, ToastTitle, useToast, VStack } from '@gluestack-ui/themed';
import { resendConfirmation } from '../../components/authHelpers';
import constants from 'expo-constants';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const ConfirmEmail = () => {
    const {email} = useLocalSearchParams()
    const [showAlert, setShowAlert] = React.useState(false);
    const [alertMessage, setAlertMessage] = React.useState("");
    const toast = useToast()


    useEffect(() => {
        if (showAlert) {
            toast.show({
                duration: 8000,
                placement:'bottom',
                render:({id})=>{
                const toastId = 'toast-'+id;
                return(
                    <Toast
                        nativeID={toastId}
                        action='error'
                        variant='accent'

                        style={{
                            backgroundColor: Colors.dark.redPastelClicked,
                            borderRadius: 10,
                            padding: 10,
                            marginBottom: constants.statusBarHeight + 20,
                        }}
                    >
                        <VStack>
                            <HStack>
                                <MaterialCommunityIcons name="alert" size={24} color={Colors.dark.text} />
                                <ToastTitle 
                                    style={{
                                        color: Colors.dark.text,
                                        fontSize: 20,
                                        fontWeight: 'bold',
                                        marginLeft: 10,
                                    }}
                                >Well shoot</ToastTitle>

                                <Pressable
                                    style={{
                                        marginLeft: 'auto',
                                    }}
                                    onPress={() => {
                                        console.log('Toast closed');
                                        toast.close(id);
                                    }}
                                >
                                    <MaterialCommunityIcons
                                        name="close"
                                        size={24}
                                        color={Colors.dark.cyan}
                                        style={{
                                            marginLeft: 'auto',
                                            marginRight: 5,
                                        }}
                                    />
                                </Pressable>
                            </HStack>
                            <ToastDescription
                                style={{
                                    color: Colors.dark.text,
                                    fontSize: 16,
                                    marginTop: 5,
                                }}
                            >
                                {alertMessage}
                            </ToastDescription>
                        </VStack>
                    </Toast>
                )
            }
            });
            setShowAlert(false)
        }
    }, [showAlert]);

    return (
        <View style={styles.container}>
            <View style={styles.card}>
                <Text style={styles.title}>Confirm Your Email</Text>
                <Text style={styles.message}>
                    Please check your email for a confirmation link to verify your account.
                </Text>

                <TouchableOpacity
                    style={styles.link}
                    onPress={()=>{
                        resendConfirmation(email as string, 1).catch((e)=>{
                            setShowAlert(true);
                            setAlertMessage(e.message);
                        })
                    }}
                >
                    <Text style={styles.linkText}>Resend Confirmation Email</Text>
                </TouchableOpacity>

                {/* <Link
                    href='/(auth)/login'
                    style={styles.link}
                >
                    <Text style={styles.linkText}>Login</Text>
                </Link> */}
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
        backgroundColor: Colors.dark.tabBg,
    },
    link:{
        borderRadius:50,
        padding: 10,
        alignSelf: 'center',
        backgroundColor: Colors.dark.cyan,
        marginTop:10,
    },
    linkText: {
        alignSelf: 'center',
        color:'white',
        fontWeight:'bold',
    },
    card: {
        width: '90%',
        padding: 20,
        borderRadius: 10,
        backgroundColor: Colors.dark.backgroundModal,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 4,
        elevation: 5,
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 10,
        textAlign: 'center',
        color: Colors.dark.redBright,
    },
    message: {
        fontSize: 16,
        textAlign: 'center',
        color: Colors.dark.text,
    },
});

export default ConfirmEmail;