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, subitemCounts, expandIdPath, 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: "border-border-default overflow-hidden rounded-xl border bg-white", style: { height: typeof height === "number" ? `${height}px` : height }, 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, expandIdPath: expandIdPath, 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: `bg-neutral-grey-5/30 flex h-full min-h-0 flex-col overflow-hidden transition-colors ${isDragOverList
                                ? "bg-feedback-blue-light ring-feedback-blue ring-2 ring-inset"
                                : ""}`, children: [_jsxs("div", { className: "border-border-default bg-neutral-grey-5/50 flex h-[37px] shrink-0 items-center gap-2 border-b px-3", children: [_jsx("span", { className: "text-neutral-grey-50 text-xs font-semibold tracking-wider", children: selectedItemsLabel }), (() => {
                                            if (items.length === 0)
                                                return null;
                                            let total = 0;
                                            let pending = false;
                                            for (const item of items) {
                                                total += 1;
                                                if (item.includeSubitems && subitemCounts) {
                                                    const c = subitemCounts[item.descriptor.id];
                                                    if (c === undefined || c === "loading") {
                                                        pending = true;
                                                    }
                                                    else if (c !== "error") {
                                                        total += c.count;
                                                        if (!c.complete)
                                                            pending = true;
                                                    }
                                                }
                                            }
                                            return (_jsxs("span", { className: "text-muted-foreground text-[11px] font-medium tabular-nums", title: pending
                                                    ? "Counting subitems…"
                                                    : `${total} item${total === 1 ? "" : "s"} will be translated`, children: [total, pending && "+"] }));
                                        })()] }), 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-border-default 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: "text-neutral-grey-100 truncate text-[13px] font-semibold", 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: "text-neutral-grey-50 cursor-pointer text-[10px] font-medium whitespace-nowrap", onClick: (e) => e.stopPropagation(), children: "Subitems" }), item.includeSubitems &&
                                                            subitemCounts &&
                                                            (() => {
                                                                const c = subitemCounts[item.descriptor.id];
                                                                if (c === undefined)
                                                                    return null;
                                                                const isObject = c !== "loading" && c !== "error";
                                                                const count = isObject ? c.count : null;
                                                                const streaming = isObject && !c.complete;
                                                                const text = c === "loading"
                                                                    ? "…"
                                                                    : c === "error"
                                                                        ? "?"
                                                                        : `+${count}${streaming ? "+" : ""}`;
                                                                return (_jsx("span", { className: "text-muted-foreground text-[10px] font-medium whitespace-nowrap tabular-nums", title: count !== null
                                                                        ? `${count}${streaming ? "+" : ""} subitem${count === 1 ? "" : "s"} will be included${streaming ? " (still counting)" : ""}`
                                                                        : c === "loading"
                                                                            ? "Counting subitems…"
                                                                            : "Failed to count subitems", children: text }));
                                                            })(), _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: "bg-neutral-grey-5/50 ring-border-default rounded-full p-4 ring-8", children: _jsx(ClipboardCheck, { className: "text-neutral-grey-50 h-6 w-6", strokeWidth: 1 }) }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-neutral-grey-50 text-sm font-medium", 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: "bg-neutral-grey-5 flex flex-col items-center gap-1 rounded 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