import { CurrentScreenContext } from "../../hooks/useCurrentScreen";
import { ProjectContext } from "../../hooks/useProject";
import type { ButtonComponent, ButtonGeneralData } from "../../types/component";
import { useContext, useEffect, useState } from "react";



export function ButtonGeneralProperties({ selectingComponent }: { selectingComponent: ButtonComponent }) {

    const projectContext = useContext(ProjectContext);
    const curScreenContext = useContext(CurrentScreenContext);


    const generalData = selectingComponent.generalData as ButtonGeneralData;
    const [text, setText] = useState<string>(generalData.text);

    useEffect(() => {
        // eslint-disable-next-line react-hooks/set-state-in-effect
        setText(generalData.text);
    }, [generalData])

    if (projectContext === null || curScreenContext === null) return <div>loading...</div>

    const projectActions = projectContext.projectActions;

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setText(e.target.value);
        projectActions.updateComponent({ ...selectingComponent, type: "button", generalData: { ...selectingComponent.generalData, text: e.target.value } })
    }

    return (
        <div>
            <label className="block font-medium text-gray-700 mb-2">
                テキスト
            </label>
            <input
                type="text"
                value={text}
                onChange={(e) => handleChange(e)}
                onKeyDown={(e) => {
                    if (e.key === "Enter") {
                        e.preventDefault()
                            ; (e.currentTarget as HTMLInputElement).blur()
                    }
                }}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
            />
        </div>
    )
}