import { useEffect, useState } from "react";
import { toast } from "react-toastify";

interface Props {
    id: string;
    solutions?: string[];
    userSolution?: string;
    maxWords: number;
    showSolutions?: boolean;
    setUserSolution: (solution: string) => void;
}

const Blank: React.FC<Props> = ({ id,
    maxWords,
    userSolution,
    showSolutions = false,
    setUserSolution, }) => {

    const [userInput, setUserInput] = useState(userSolution || "");

    useEffect(() => {
        const words = userInput.split(" ");
        if (words.length > maxWords) {
            toast.warning(`You have reached your word limit of ${maxWords} words!`, { toastId: "word-limit" });
            setUserInput(words.join(" ").trim());
        }
    }, [maxWords, userInput]);

    return (
        <input
            className="py-2 px-3 mx-2 rounded-2xl w-48 bg-white focus:outline-none my-2"
            placeholder={id}
            onChange={(e) => setUserInput(e.target.value)}
            onBlur={() => setUserSolution(userInput)}
            value={userInput}
            contentEditable={showSolutions}
        />
    );
}

export default Blank;
