import { ComponentType } from "../../types/component";
import type { Component } from "../../types/component"
import { FiEdit3, FiGrid, FiSquare, FiType } from "react-icons/fi";
import { FaTrash } from "react-icons/fa";
import { useContext } from "react";
import { ProjectContext } from "../../hooks/useProject";
import { CurrentScreenContext } from "../../hooks/useCurrentScreen";

function IconComponent({ type, size }: { type: ComponentType, size: number }) {
    switch (type) {
        case ComponentType.Button:
            return <FiSquare size={size} />;
        case ComponentType.Text:
            return <FiType size={size} />;
        case ComponentType.TextField:
            return <FiEdit3 size={size} />;
        case ComponentType.Table:
            return <FiGrid size={size} />;
        default:
            return <FiSquare size={size} />;
    }
}

interface ComponentItemProps {
    component: Component
    isSelecting: boolean
    index: number
    selectComponent: (index: number) => void
    deleteComponent: (screenId: string, compoenntId: string) => void
}

function ComponentItem({ component, isSelecting, index, selectComponent, deleteComponent }: ComponentItemProps) {

    const onClickHandler = (e: React.MouseEvent) => {
        e.stopPropagation();
        selectComponent(index);
    }

    const deleteHandler = (e: React.MouseEvent) => {
        e.stopPropagation()
        selectComponent(-1);
        deleteComponent(component.screenId, component.id);
    }

    return (
        <div
            className={`group flex items-center gap-2 p-2 rounded-lg transition-all duration-200 ${isSelecting ? 'bg-blue-100' : 'bg-white'} border border-gray-200`}
            onClick={onClickHandler}
        >
            <div className={`flex items-center justify-center w-6 h-6 rounded`}>
                <IconComponent size={12} type={component.type} />
            </div>
            <div className="flex-1 min-w-0">
                <div className="text-xs font-medium text-gray-900 truncate">
                    {component.type}
                </div>
                <div className="text-xs text-gray-500 truncate">
                    {component.name.length < 16 ? component.name : `${component.name.slice(0, 16)}...`}
                </div>
            </div>
            <div
                className="p-1 text-gray-400 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity"
                onClick={deleteHandler}
            >
                <FaTrash />
            </div>
        </div>
    )
}

export function ComponentList() {

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

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

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

    return (
        <div className="flex flex-col bg-white h-screen">

            <div className="flex-shrink-0 p-4 pb-3 border-b border-gray-100">
                <div className="flex items-center justify-between">
                    <h3 className="font-semibold text-gray-900">コンポーネント</h3>
                    <div className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
                        {curScreenStates.curScreenComponents.length}
                    </div>
                </div>
            </div>

            <div className="flex-1 overflow-y-auto">
                <div className="p-4 pt-3">
                    {curScreenStates.curScreenComponents.length === 0 ? (
                        <div className="text-center py-6">
                            <div className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <FiSquare size={16} className="text-gray-400" />
                            </div>
                            <p className="text-xs text-gray-500">コンポーネントなし</p>
                        </div>
                    ) : (
                        <div className="space-y-1">
                            {curScreenStates.curScreenComponents.map((item, index) => (
                                <ComponentItem
                                    key={item.id}
                                    component={item}
                                    isSelecting={curScreenStates.selectingComponentIndex === index}
                                    index={index}
                                    selectComponent={curScreenActions.selectComponent}
                                    deleteComponent={projectActions.deleteComponent}
                                />
                            ))}
                        </div>
                    )}
                </div>
            </div>

        </div>
    )
}