import { useContext, useEffect, useState } from "react"
import { ActiveTab } from "../../constants/activeTab"
import type { TableComponent, TableGeneralData } from "../../types/component"
import { ProjectContext } from "../../hooks/useProject";
import { CurrentScreenContext } from "../../hooks/useCurrentScreen";



export function TableProperty({ selectingComponent, activeTab }: { selectingComponent: TableComponent, activeTab: ActiveTab }) {

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

    const generalData = selectingComponent.generalData as TableGeneralData;
    const [reference, setReference] = useState<string>(generalData.referenceTableName);
    const selectableColumns = projectContext!.projectStates.tables.find(table => table.name === reference)?.columns ?? [];
    const [columns, setColumns] = useState<string[]>(generalData.columns);

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


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

    const projectActions = projectContext.projectActions;
    const projectStates = projectContext.projectStates;

    const { updateComponent } = projectActions;
    const { tables } = projectStates;

    const onReferenceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        setReference(e.target.value);
        setColumns([]);
        updateComponent({ ...selectingComponent, generalData: { ...generalData, referenceTableName: e.target.value, columns: [] } })
    }

    const onColumnSelect = (name: string) => {
        if (columns.includes(name)) {
            setColumns(prev => prev.filter(col => col !== name));
            updateComponent({ ...selectingComponent, generalData: { ...generalData, columns: columns.filter(col => col !== name) } })
        } else {
            setColumns(prev => [...prev, name]);
            updateComponent({ ...selectingComponent, generalData: { ...generalData, columns: [...columns, name] } })
        }

    }


    if (activeTab === ActiveTab.GENERAL)
        return (
            <div className="flex-col">
                <div className="mb-4">
                    <label className="block font-medium text-gray-700 mb-2">
                        参照テーブル
                    </label>
                    <select
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                        value={reference}
                        onChange={(e) => onReferenceChange(e)}
                    >
                        <option value={""}>選択してください...</option>
                        {tables.map((table, idx) =>
                            <option key={`tablePropDrop${idx}`} value={table.name}>
                                {table.name}
                            </option>
                        )}
                    </select>
                </div>
                <div>
                    <label className="block font-medium text-gray-700 mb-2">
                        表示カラム
                    </label>
                    <div className="flex-col ml-4">
                        {selectableColumns.map((col, idx) => {
                            if (!col.foreignTableColumns) return (
                                <label key={`tablePropCol${idx}`} className="flex">
                                    <input
                                        type="checkbox"
                                        className="mr-2"
                                        checked={columns.includes(col.name)}
                                        onChange={() => onColumnSelect(col.name)}
                                    />
                                    {col.name}
                                </label>
                            )
                            return col.foreignTableColumns.map((fcol, idx) =>
                                <label key={`tablePropFCol${idx}`} className="flex">
                                    <input
                                        type="checkbox"
                                        className="mr-2"
                                        checked={columns.includes(`${col.name}.${fcol}`)}
                                        onChange={() => onColumnSelect(`${col.name}.${fcol}`)}
                                    />
                                    {col.name}.{fcol}
                                </label>
                            )
                        })}
                    </div>
                </div>
            </div>
        )

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

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

}