import { Box, MantineSize, Text, SimpleGrid } from "@mantine/core";
import classes from './TextChain.module.css'
import { useState, useEffect } from "react";

interface TextChainProps {
    text: string;
    mt?: MantineSize;
    withoutPaper?: boolean;
}

export function TextChain(props : TextChainProps) {
    const text = props.text;
    const [mounted, setMounted] = useState<boolean[]>([]);

    useEffect(() => {
        const words = text.split(" ");
        setMounted(new Array(words.length).fill(false));
        
        words.forEach((_, index) => {
            setTimeout(() => {
                setMounted(prev => {
                    const newMounted = [...prev];
                    newMounted[index] = true;
                    return newMounted;
                });
            }, index * 50);
        });
    }, [text]);

    const grid = (
         <SimpleGrid cols={3} spacing="xs">
            {text.split(" ").map((v, i) => {
                return (
                    <Box 
                        key={i}
                        className={classes.wordBox}
                        style={{
                            opacity: mounted[i] ? 1 : 0,
                            transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
                            transition: 'opacity 300ms ease, transform 300ms ease',
                        }}
                    >
                        <Text size="xs" c="dimmed" mr={4}>{i + 1}.</Text>
                        <Text size="sm" fw={500}>{v}</Text>
                    </Box>
                );
            })}
        </SimpleGrid>
    );

    return (
        !props.withoutPaper ? (
        <Box mt={props.mt}>
            <Box className={classes.displayArea}>
                <Text size="sm" mb="md" c="dimmed">
                    Your seed phrase:
                </Text>
                {grid}
            </Box>
        </Box>
        ) : (
        <Box mt={props.mt}>
            {grid}
        </Box>
        )
    )
}