import type React from 'react';
import { useEffect, useRef, useState } from 'react';

export interface ChooseArtProps {
    artSubmissionCallback: (art: string) => void;
}

export const ChooseArt: React.FC<ChooseArtProps> = ({
    artSubmissionCallback,
}) => {
    const [art, setArt] = useState('');
    const promptRef = useRef<HTMLTextAreaElement>(null);

    useEffect(() => {
        if (!promptRef.current) {
            return;
        }
        // Automatically focus the textarea when the component mounts
        promptRef.current.focus();
    }, [promptRef]);

    const handleSubmit = () => {
        if (!art.trim()) {
            return;
        }
        artSubmissionCallback(art);
    };

    return (
        <div>
            <textarea
                ref={promptRef}
                value={art}
                onChange={(e) => setArt(e.target.value)}
                placeholder='paste your ascii art here...'
                rows={15}
                cols={80}
            />
            <div className={"maybe-visible " + (art.trim() ? "visible" : "invisible")}>
                <hr />
                <button  onClick={handleSubmit}>color!</button>
            </div>
        </div>
    );
};