import { useContext, useEffect, useState } from "react"
import { ActiveTab } from "../../constants/activeTab"
import type { TextComponent, TextGeneralData } from "../../types/component"
import { MdEdit } from "react-icons/md"
import { ProjectContext } from "../../hooks/useProject"
import { CurrentScreenContext } from "../../hooks/useCurrentScreen"

interface TextPropertyProps {
    activeTab: ActiveTab
    selectingComponent: TextComponent
}

export function TextProperty({
    selectingComponent,
    activeTab
}: TextPropertyProps) {

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

    const generalData = selectingComponent.generalData as TextGeneralData;
    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 (projectContext === null || curScreenContext === null) return <div>loading...</div>

    const projectActions = projectContext.projectActions;
    const curScreenActions = curScreenContext.curScreenActions;

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

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

    const handleSelectMode = () => {
        curScreenActions.setSelectComponentListener((comp) => {
            if (comp !== null) {
                setText("${" + comp.name + "}");
                const newData: TextGeneralData = { ...selectingComponent.generalData, text: "${" + comp.name + "}" }
                const newComponent: TextComponent = { ...selectingComponent as TextComponent, generalData: newData }
                projectActions.updateComponent(newComponent)
            }
            setSelectMode(false);
        })
        setSelectMode(true);
        curScreenActions.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>
    )
}