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

export function CreateSeed() {
	const [phrase, setPhrase] = useMemory("seed-phrase", "", true);
	const {copy} = useClipboard();
	const navigate = useNavigate();
	const {setSize, setResizeble} = useWindow();
	const [mounted, setMounted] = useState(false);
	
    useEffect(() => {
        setSize(385, 555); 
		setResizeble(false);
		setTimeout(() => setMounted(true), 100);
    }, []);

	const openCopyModal = () => {
		modals.openConfirmModal({
			title: 'Stop',
			centered: true,
			children: (
			  <Text size="sm">
				Do you really just want to copy your secret phrase and that's it? 
				We still recommend writing it down on a piece of paper rather than just copying it.
			  </Text>
			),
			withCloseButton: false,
			labels: { confirm: 'Copy', cancel: "Cancel" },
			confirmProps: { color: 'red' },
			onCancel: () => copy("")
		  });
	}

	const generate = async () => {
		const mnemonic = await generateMnemonic(wordlist);
		setPhrase(mnemonic);
	}

	useEffect(() => {
		generate();
	}, []);

	return (
		<Flex w={'100%'} h={520}>
			<Flex w={385} h={'100%'} direction={'column'} justify={'space-between'}>
				<AuthFlowBreadcrumbs title="Create 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'}>
								This seed phrase is needed to access your correspondence, save it in a safe place
							</Text>
						</Flex>
					)}
				</Transition>

				<Transition mounted={mounted} transition="slide-up" duration={500} timingFunction="ease">
					{(styles) => (
						<Flex p={'sm'} justify={'center'} align={'center'} style={styles}>
							<TextChain text={phrase}></TextChain>
						</Flex>
					)}
				</Transition>

				<Transition mounted={mounted} transition="slide-up" duration={600} timingFunction="ease">
					{(styles) => (
						<Flex p={'sm'} direction={'column'} gap={'lg'} style={styles}>
							<CopyButtonIcon onClick={openCopyModal} fullWidth size={'md'} value={phrase} caption='Copy phrase'></CopyButtonIcon>
							<AnimatedButton animated={
								['#2DA5FF', '#87DBFF']
							} rightSection={
								<IconChevronRight size={14}></IconChevronRight>
							} fullWidth onClick={() => navigate('/confirm-seed')} size={'md'}>
								Next step
							</AnimatedButton>
						</Flex>
					)}
				</Transition>
			</Flex>
		</Flex>
	);
}