import { useMemory } from "@/app/providers/MemoryProvider/useMemory";
import { Flex, Text, Transition } from "@mantine/core";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { IconChevronRight } from "@tabler/icons-react";
import { InputChainWords } from "@/app/components/InputChainWords/InputChainWords";
import wordlist from "web-bip39/wordlists/english";
import useWindow from "@/app/hooks/useWindow";
import { AnimatedButton } from "@/app/components/AnimatedButton/AnimatedButton";
import { AuthFlowBreadcrumbs } from "@/app/components/AuthFlowBreadcrumbs/AuthFlowBreadcrumbs";

export function ExistsSeed() {
    const navigate = useNavigate();
    const [_, setPhrase] = useMemory("seed-phrase", "", true); 
    const [passed, setPassed] = useState(false);
    const [words, setWords] = useState("");
    const {setSize, setResizeble} = useWindow();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setSize(385, 555); 
		setResizeble(false);
		setTimeout(() => setMounted(true), 100);
    }, []);

    const onPassed = (words : string[]) => {
        setWords(words.join(" "));
        setPassed(true);
    };

    const onNotPassed = () => {
        setPassed(false);
    };

    const onNextStep = () => {
        setPhrase(words);
        navigate('/set-password');
    }
    
    return (
		<Flex w={'100%'} h={520}>
			<Flex w={385} h={'100%'} direction={'column'} justify={'space-between'}>
				<AuthFlowBreadcrumbs title="Import account"></AuthFlowBreadcrumbs>
				
				<Transition mounted={mounted} transition="slide-up" duration={400} timingFunction="ease">
					{(styles) => (
						<Flex w={'100%'} direction={'column'} pl={'sm'} pr={'sm'} align={'center'} style={styles}>
							<Text c="dimmed" ta={'center'} size={'xs'}>
								Enter your seed phrase that you generated or that was created when setting up your account
							</Text>
						</Flex>
					)}
				</Transition>

				<Transition mounted={mounted} transition="slide-up" duration={500} timingFunction="ease">
					{(styles) => (
						<Flex p={'sm'} justify={'center'} align={'center'} style={styles}>
							<InputChainWords placeholderFunc={(i) => i + 1 + "."} wordlist={wordlist} onPassed={onPassed} onNotPassed={onNotPassed} words={12}></InputChainWords>
						</Flex>
					)}
				</Transition>

				<Transition mounted={mounted} transition="slide-up" duration={600} timingFunction="ease">
					{(styles) => (
						<Flex p={'sm'} direction={'column'} gap={'lg'} style={styles}>
							<AnimatedButton 
								animated={['#2DA5FF', '#87DBFF']} 
								rightSection={<IconChevronRight size={14}></IconChevronRight>}
								fullWidth 
								disabled={!passed} 
								onClick={() => onNextStep()} 
								size={'md'}
							>
								Next step
							</AnimatedButton>
						</Flex>
					)}
				</Transition>
			</Flex>
		</Flex>
	);
}