import { useEffect, useMemo, useState } from "react"
import { ActiveTab } from "../../constants/activeTab"
import type { Component, TextComponent, TextGeneralData } from "../../types/component"
import { MdEdit } from "react-icons/md"
import type { ComponentActions } from "../../hooks/useComponent"

interface TextPropertyProps {
    component: TextComponent
    index: number
    activeTab: ActiveTab
    componentActions: ComponentActions
    updateComponent: (index: number, component: Component) => void
}

export function TextProperty({
    component,
    index,
    activeTab,
    componentActions,
    updateComponent,
}: TextPropertyProps) {

    const generalData = useMemo(() => component.generalData as TextGeneralData, [component])
    const [text, setText] = useState<string>(generalData.text);
    const [selectMode, setSelectMode] = useState<boolean>(false);

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


    if (activeTab !== ActiveTab.GENERAL) return <div></div>

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setText(e.target.value);
        const newData: TextGeneralData = { ...component.generalData, text: e.target.value }
        const newComponent: TextComponent = { ...component, generalData: newData }
        updateComponent(index, newComponent)
    }

    const handleSelectMode = () => {
        componentActions.setSelectComponentListener((comp) => {
            if (comp !== null) {
                setText("${" + comp.name + "}");
                const newData: TextGeneralData = { ...component.generalData, text: "${" + comp.name + "}" }
                const newComponent: TextComponent = { ...component, generalData: newData }
                updateComponent(index, newComponent)
            }
            setSelectMode(false);
        })
        setSelectMode(true);
        componentActions.activateSelectMode();
    }

    return (
        <div>
            <label className="block font-medium text-gray-700 mb-2">
                テキスト
            </label>
            <div className="flex gap-4">
                <input
                    type="text"
                    value={text}
                    onChange={(e) => handleChange(e)}
                    onKeyDown={(e) => {
                        if (e.key === "Enter") {
                            e.preventDefault();
                            (e.currentTarget as HTMLInputElement).blur()
                        }
                    }}
                    className="flex-6 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"
                />
                <button
                    onClick={() => handleSelectMode()}
                    className={`flex-1 flex items-center border border-gray-300 justify-center 
                        rounded-lg hover:bg-gray-300 hover:text-gray-900 
                        transition ${selectMode ? "bg-blue-500 text-gray-100" : "text-gray-600"}`}
                >
                    <MdEdit />
                </button>
            </div>
        </div>
    )
}