import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { ChevronLeft, ChevronRight, ClipboardCheck, X } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Label } from "../../components/ui/label";
import { Switch } from "../../components/ui/switch";
import { useEditContext } from "../client/editContext";
import { TreeListSelector } from "./TreeListSelector";
import { Splitter } from "./Splitter";
import { SimpleIconButton } from "./SimpleIconButton";
export function ItemCollectionEditor({ items, selectedInTree, onSelectedInTreeChange, selectedFromList, onSelectedFromListChange, onAddToList, onRemoveFromList, onAddItem, onRemoveItem, onToggleSubitems, language, rootItemIds = [], selectedItemsLabel = "Selected Items", emptyMessage = "No items selected", emptyHint = "Browse or search to add items", height = 340, localStorageKey = "item-collection-editor-splitter", }) {
    const editContext = useEditContext();
    const [isDragOverList, setIsDragOverList] = useState(false);
    const handleDropFromTree = useCallback((event) => {
        event.preventDefault();
        setIsDragOverList(false);
        const dragObject = editContext?.dragObject;
        if (dragObject?.type !== "items" || !dragObject.items?.length) {
            return;
        }
        const draggedItems = dragObject.items.map((item) => {
            const descriptor = item;
            return {
                id: descriptor.id,
                name: descriptor.name || descriptor.path || descriptor.id,
                displayName: descriptor.displayName,
                path: descriptor.path,
                idPath: descriptor.idPath,
                language: descriptor.language,
                version: descriptor.version,
            };
        });
        void onAddToList(draggedItems);
    }, [editContext?.dragObject, onAddToList]);
    const handleDragOverList = useCallback((event) => {
        const dragObject = editContext?.dragObject;
        if (dragObject?.type !== "items") {
            return;
        }
        event.preventDefault();
        event.dataTransfer.dropEffect = "copy";
        setIsDragOverList(true);
    }, [editContext?.dragObject]);
    const handleDragLeaveList = useCallback((event) => {
        const relatedTarget = event.relatedTarget;
        const currentTarget = event.currentTarget;
        if (!currentTarget.contains(relatedTarget)) {
            setIsDragOverList(false);
        }
    }, []);
    return (_jsx("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white", style: { height: `${height}px` }, children: _jsx(Splitter, { className: "h-full", direction: "horizontal", localStorageKey: localStorageKey, panels: [
                {
                    name: "treeSelector",
                    defaultSize: 50,
                    content: (_jsx(TreeListSelector, { language: language, rootItemIds: rootItemIds, selectedItemIds: selectedInTree.map((item) => item.id), onSelectionChange: onSelectedInTreeChange, onDoubleClick: onAddItem, onItemSelected: onAddItem, enableDragAndDrop: true, isDraggable: () => true, showGrabCursorForDraggableNodes: true })),
                },
                {
                    name: "selectedItems",
                    defaultSize: 50,
                    content: (_jsx("div", { className: "relative h-full w-full", onDrop: handleDropFromTree, onDragOver: handleDragOverList, onDragLeave: handleDragLeaveList, children: _jsxs("div", { className: `flex h-full min-h-0 flex-col overflow-hidden bg-gray-50/30 transition-colors ${isDragOverList ? "bg-blue-50 ring-2 ring-inset ring-blue-300" : ""}`, children: [_jsx("div", { className: "flex h-[37px] shrink-0 items-center border-b border-gray-100 bg-gray-50/50 px-3", children: _jsx("span", { className: "text-xs font-semibold tracking-wider text-gray-600 uppercase", children: selectedItemsLabel }) }), items.length > 0 ? (_jsx("div", { className: "min-h-0 flex-1 space-y-1.5 overflow-y-auto p-2", children: items.map((item, index) => (_jsx("div", { className: `group flex cursor-pointer flex-col gap-1 rounded-lg border p-2 transition-all ${selectedFromList.includes(item)
                                            ? "border-primary/30 bg-primary/5 ring-primary/20 ring-1"
                                            : "hover:border-primary/20 border-gray-200 bg-white"}`, onClick: (e) => {
                                            if (e.ctrlKey || e.metaKey) {
                                                if (selectedFromList.includes(item)) {
                                                    onSelectedFromListChange(selectedFromList.filter((i) => i !== item));
                                                }
                                                else {
                                                    onSelectedFromListChange([
                                                        ...selectedFromList,
                                                        item,
                                                    ]);
                                                }
                                            }
                                            else if (selectedFromList.length === 1 &&
                                                selectedFromList.includes(item)) {
                                                onSelectedFromListChange([]);
                                            }
                                            else {
                                                onSelectedFromListChange([item]);
                                            }
                                        }, onDoubleClick: () => {
                                            onRemoveItem(index);
                                            onSelectedFromListChange([]);
                                        }, children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[13px] font-semibold text-gray-900", children: item.descriptor.displayName ||
                                                                item.descriptor.name ||
                                                                item.descriptor.path ||
                                                                item.descriptor.id }), item.descriptor.path && (_jsx("span", { className: "text-muted-foreground truncate text-[10px]", title: item.descriptor.path, children: item.descriptor.path }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(Label, { htmlFor: `subpages-${item.descriptor.id}-${index}`, className: "cursor-pointer text-[10px] font-medium whitespace-nowrap text-gray-500", onClick: (e) => e.stopPropagation(), children: "Subitems" }), _jsx(Switch, { id: `subpages-${item.descriptor.id}-${index}`, checked: item.includeSubitems, onCheckedChange: () => onToggleSubitems(index), onClick: (e) => e.stopPropagation(), className: "scale-[0.6]" }), _jsx(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-6 w-6 shrink-0 p-0 opacity-0 transition-all group-hover:opacity-100", onClick: (e) => {
                                                                e.stopPropagation();
                                                                onRemoveItem(index);
                                                            }, children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }) }, `${item.descriptor.id}-${index}`))) })) : (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx("div", { className: "rounded-full bg-gray-100/50 p-4 ring-8 ring-gray-50", children: _jsx(ClipboardCheck, { className: "h-6 w-6 text-gray-300", strokeWidth: 1 }) }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-gray-500", children: isDragOverList ? "Drop items here" : emptyMessage }), _jsx("p", { className: "text-muted-foreground text-xs", children: isDragOverList
                                                        ? "Release to add them to the selected items list"
                                                        : emptyHint })] })] }))] }) })),
                },
            ], handleContent: (index) => index === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-1 rounded bg-gray-100 py-1", children: [_jsx(SimpleIconButton, { label: "Add", icon: _jsx(ChevronRight, { size: 14, strokeWidth: 1 }), onClick: () => void onAddToList(selectedInTree), disabled: selectedInTree.length === 0, showTooltip: false, className: "px-0" }), _jsx(SimpleIconButton, { label: "Remove", icon: _jsx(ChevronLeft, { size: 14, strokeWidth: 1 }), onClick: onRemoveFromList, disabled: selectedFromList.length === 0, showTooltip: false, className: "px-0" })] })) : null }) }));
}
//# sourceMappingURL=ItemCollectionEditor.js.map