import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
import { renderSidebarIcon } from "./NavigationPanelItem";
import { DrawingPinFilledIcon, DrawingPinIcon } from "@radix-ui/react-icons";
/**
 * Shared component for sidebar items in a list/menu format (e.g. in popovers)
 */
export const NavigationPanelMenuItem = ({ sidebar, contextValues, handlers, onClick, }) => {
    const { openSidebars, pinnedSidebars } = contextValues;
    const isOpen = openSidebars.includes(sidebar.id);
    const isPinned = pinnedSidebars.includes(sidebar.id);
    return (_jsxs("div", { className: cn("group hover:bg-neutral-grey-5 flex cursor-pointer items-center justify-between rounded p-2 transition-colors", isOpen && "bg-neutral-grey-5"), onClick: onClick, "data-testid": `sidebar-${sidebar.id}`, children: [_jsxs("div", { className: "flex items-center gap-1.5 overflow-hidden pr-2", children: [renderSidebarIcon(sidebar.icon), _jsx("span", { className: "truncate text-xs", children: sidebar.title })] }), _jsxs(Tooltip, { delayDuration: 500, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "hover:bg-neutral-grey-10 flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors", onClick: (e) => {
                                e.stopPropagation();
                                e.preventDefault();
                                handlers.onTogglePin(sidebar.id);
                            }, onMouseDown: (e) => {
                                e.stopPropagation();
                            }, children: isPinned ? (_jsx(DrawingPinFilledIcon, { className: "text-highlight-100 h-4 w-4" })) : (_jsx(DrawingPinIcon, { className: "text-neutral-grey-50 h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "right", children: isPinned ? "Unpin from toolbar" : "Pin to toolbar" })] })] }));
};
//# sourceMappingURL=NavigationPanelMenuItem.js.map