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

interface InputChainWordsProps {
    words: number;
    onPassed: (words : string[]) => void;
    wordlist?: string[];
    onNotPassed: () => void;
    placeholderFunc?: (inputNumber : number) => string;
}

export function InputChainWords(props : InputChainWordsProps) {
    const [inputValues, setInputValues] = useState<string[]>(Array(props.words).fill(""));
    const [mounted, setMounted] = useState<boolean[]>([]);

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

    const handleInputChange = (value: string, index: number) => {
        const updatedValues = [...inputValues];
        updatedValues[index] = value;
        setInputValues(updatedValues);

        const allFilled = updatedValues.every((word) => word.trim() !== "");
        const allValid = props.wordlist
            ? updatedValues.every((word) => props.wordlist!.includes(word.trim()))
            : true;

        if (allFilled && allValid) {
            props.onPassed(updatedValues);
        } else {
            props.onNotPassed();
        }
    }

    const handlePaste = (event: React.ClipboardEvent) => {
        event.preventDefault();
        const pastedText = event.clipboardData.getData("text");
        const pastedWords = pastedText.split(/\s+/).slice(0, props.words);

        const updatedValues = [...inputValues];
        pastedWords.forEach((word, index) => {
            if (index < props.words) {
                updatedValues[index] = word;
            }
        });

        setInputValues(updatedValues);

        const allFilled = updatedValues.every((word) => word.trim() !== "");
        const allValid = props.wordlist
            ? updatedValues.every((word) => props.wordlist!.includes(word.trim()))
            : true;

        if (allFilled && allValid) {
            props.onPassed(updatedValues);
        } else {
            props.onNotPassed();
        }
    };

    return (
        <Box>
            <Box className={classes.displayArea}>
                <Text size="sm" mb="md" c="dimmed">
                    Enter your seed phrase:
                </Text>
                <SimpleGrid cols={3} spacing="xs">
                    {Array.from({ length: props.words }, (_, i) => (
                        <Box
                            key={i}
                            style={{
                                opacity: mounted[i] ? 1 : 0,
                                transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
                                transition: 'opacity 300ms ease, transform 300ms ease',
                            }}
                        >
                            <TextInput
                                type="text"
                                value={inputValues[i]}
                                onChange={(e) => handleInputChange(e.target.value, i)}
                                onPaste={(e) => handlePaste(e)}
                                //placeholder={props.placeholderFunc ? props.placeholderFunc(i) : undefined}
                                classNames={{ input: classes.wordInput }}
                                leftSection={
                                    <Text size="xs" c="dimmed">{i + 1}.</Text>
                                }
                                size="sm"
                            />
                        </Box>
                    ))}
                </SimpleGrid>
            </Box>
        </Box>
    );
}