import type { ButtonGeneralData, Component } from "../../types/component";
import { useEffect, useState } from "react";


interface ButtonGeneralPropertiesProps {
    component: Component
    index: number
    updateComponent: (index: number, component: Component) => void
}

export function ButtonGeneralProperties({
    component,
    index,
    updateComponent,
}: ButtonGeneralPropertiesProps) {

    const generalData = component.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])


    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setText(e.target.value);
        updateComponent(index, { ...component, type: "button", generalData: { ...component.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>
    )
}