import { Button, Flex, Group, Text, Transition } from "@mantine/core";
import { useNavigate } from "react-router-dom";
import { InputChainHidden } from "@/app/components/InputChainHidden/InputChainHidden";
import { useMemory } from "@/app/providers/MemoryProvider/useMemory";
import { AuthFlowBreadcrumbs } from "@/app/components/AuthFlowBreadcrumbs/AuthFlowBreadcrumbs";
import { useEffect, useState } from "react";

export function ConfirmSeed() {
    const navigate = useNavigate();
    const [phrase, _] = useMemory("seed-phrase", "", true); 
    const [mounted, setMounted] = useState(false);

	useEffect(() => {
		if(phrase.trim() == ''){
			navigate('/create-seed');
		}
        setTimeout(() => setMounted(true), 100);
	}, [phrase]);


    const onPassed = () => {
        navigate('/set-password');
    };
    
    return (
		<Flex h={520} w={385}>
			<Flex h={'100%'} w={'100%'}>
				<Flex h={'100%'} w={'100%'} direction="column" align="center" justify="space-between">
					<AuthFlowBreadcrumbs rightSection={
						<Button p={0} onClick={onPassed} variant={'transparent'}>Skip</Button>
					} title="Confirm phrase"></AuthFlowBreadcrumbs>
					<Flex>
						<Transition mounted={mounted} transition="slide-up" duration={400} timingFunction="ease">
                            {(styles) => (
                                <Flex w={'100%'} direction={'column'} mt={'sm'} pl={'sm'} pr={'sm'} align={'center'} style={styles}>
                                    <Text c="dimmed" ta={'center'} size={'xs'}>
										To confirm that you have saved your seed phrase, please <strong>enter the missing words</strong>.
									</Text>
                                </Flex>
                            )}
                        </Transition>
					</Flex> 
					<Group p={'md'}> 
                        <InputChainHidden w={120} size={'sm'} onPassed={onPassed} text={phrase} hidden={3}></InputChainHidden>
					</Group> 
					<Flex align={'center'} w={'100%'} p={'md'} direction={'column'} justify={'center'} gap={'sm'}>
						<Transition mounted={mounted} transition="slide-up" duration={500} timingFunction="ease">
                            {(styles) => (
                                <Flex p={'sm'} direction={'column'} gap={'lg'} style={styles}>
                                    {/* Button section */}
                                </Flex>
                            )}
                        </Transition>
					</Flex>
				</Flex>
			</Flex>
		</Flex>
	);
}