import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { cn } from "../../lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "../../components/ui/context-menu";
import { Layers, Pin, PinOff, X } from "lucide-react";
export const renderSidebarIcon = (icon) => {
    if (icon && React.isValidElement(icon)) {
        return React.cloneElement(icon, {
            className: cn("w-4 h-4"),
            strokeWidth: 1.5,
        });
    }
    return null;
};
export const NavigationPanelItem = ({ sidebar, contextValues, handlers, isMobile, dragOverId, }) => {
    const { openSidebars, pinnedSidebars, sidebarStacks, showLabels, sidebars } = contextValues;
    const isOpen = openSidebars.includes(sidebar.id);
    const isPinned = pinnedSidebars.includes(sidebar.id);
    const isIconDraggable = !isMobile && (isPinned || isOpen);
    const currentStack = sidebarStacks?.find((s) => s.includes(sidebar.id)) ?? null;
    const isStacked = !!(currentStack && currentStack.length > 1);
    const stackCandidates = sidebars.filter((candidate) => candidate.id !== sidebar.id &&
        openSidebars.includes(candidate.id) &&
        candidate.position === "left");
    return (_jsxs(ContextMenu, { children: [_jsxs(Tooltip, { delayDuration: 500, children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": sidebar.title, className: cn(isOpen
                                    ? "border-gray-300 bg-gray-100 text-gray-900"
                                    : "border-transparent text-gray-500 hover:bg-gray-50 hover:text-gray-700", "relative flex shrink-0 cursor-pointer flex-col items-center justify-center rounded border transition-colors select-none", showLabels
                                    ? isMobile
                                        ? "w-14 p-1"
                                        : "h-auto w-full gap-0.5 px-1.5 py-1.5"
                                    : isMobile
                                        ? "p-1.25"
                                        : "h-8 w-8", dragOverId === sidebar.id && "ring-2 ring-blue-400"), "data-sidebar-id": sidebar.id, "data-testid": `sidebar-icon-${sidebar.id}`, onClick: () => handlers.onToggleSidebar(sidebar.id), draggable: isIconDraggable, onDragStart: (e) => handlers.onIconDragStart(e, sidebar.id), onDragEnd: handlers.onIconDragLeave, onDragOver: (e) => handlers.onIconDragOver(e, sidebar.id), onDragLeave: handlers.onIconDragLeave, onDrop: (e) => handlers.onIconDrop(e, sidebar.id), children: [_jsx("div", { className: cn("relative", showLabels ? "p-0.5" : ""), children: renderSidebarIcon(sidebar.icon) }), showLabels && (_jsx("span", { className: cn("mt-0.5 max-w-full text-center text-[10px] leading-tight", isMobile
                                            ? "w-full truncate px-0.5 whitespace-nowrap"
                                            : "font-medium wrap-break-word"), children: sidebar.title }))] }) }) }), _jsx(TooltipContent, { side: "right", children: sidebar.title })] }), _jsxs(ContextMenuContent, { children: [isOpen && stackCandidates.length > 0 && (_jsxs(ContextMenuSub, { children: [_jsx(ContextMenuSubTrigger, { children: "Stack with..." }), _jsx(ContextMenuSubContent, { children: stackCandidates.map((target) => (_jsx(ContextMenuItem, { onSelect: () => handlers.onStack(sidebar.id, target.id, "after"), children: target.title }, `stack-with-${sidebar.id}-${target.id}`))) })] })), isOpen && isStacked && (_jsxs(ContextMenuItem, { onSelect: () => handlers.onUnstack(sidebar.id), children: [_jsx(Layers, { className: "size-4", strokeWidth: 1 }), "Unstack"] })), _jsx(ContextMenuItem, { onSelect: () => handlers.onTogglePin(sidebar.id), children: isPinned ? (_jsxs(_Fragment, { children: [_jsx(PinOff, { className: "size-4", strokeWidth: 1 }), "Unpin"] })) : (_jsxs(_Fragment, { children: [_jsx(Pin, { className: "size-4", strokeWidth: 1 }), "Pin to toolbar"] })) }), isOpen && (_jsxs(ContextMenuItem, { onSelect: () => handlers.onToggleSidebar(sidebar.id, { forceClose: true }), children: [_jsx(X, { className: "size-4", strokeWidth: 1 }), "Close"] }))] })] }, `sidebar-${sidebar.id}`));
};
//# sourceMappingURL=NavigationPanelItem.js.map