import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
import { cn } from "../../lib/utils";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
import { useEffect, useRef, useState } from "react";
import { VerticalDotsIcon } from "../ui/Icons";
import { NavigationPanelMenuItem } from "./NavigationPanelMenuItem";
export function MorePanelsButton({ panels, contextValues, handlers, side = "bottom", }) {
    const [disableTooltip, setDisableTooltip] = useState(false);
    const [isSidebarPopoverOpen, setIsSidebarPopoverOpen] = useState(false);
    const [tooltipOpen, setTooltipOpen] = useState(false);
    const tooltipReenableTimer = useRef(null);
    useEffect(() => {
        if (isSidebarPopoverOpen || disableTooltip) {
            setTooltipOpen(false);
        }
    }, [isSidebarPopoverOpen, disableTooltip]);
    const handleSidebarClickAndClosePopover = (sidebarId) => {
        handlers.onOpenSidebar(sidebarId);
        if (tooltipReenableTimer.current) {
            window.clearTimeout(tooltipReenableTimer.current);
        }
        setDisableTooltip(true);
        tooltipReenableTimer.current = window.setTimeout(() => {
            setDisableTooltip(false);
            tooltipReenableTimer.current = null;
        }, 800);
        setIsSidebarPopoverOpen(false);
    };
    const isDismissBlockedTarget = (target) => {
        if (!target)
            return false;
        return !!(target.closest('[data-slot="tooltip-content"]') ||
            target.closest('[data-help-panel="true"]'));
    };
    return (_jsxs(Popover, { open: isSidebarPopoverOpen, onOpenChange: setIsSidebarPopoverOpen, children: [_jsxs(Tooltip, { delayDuration: disableTooltip ? 100000 : 500, open: tooltipOpen, onOpenChange: (open) => {
                    if (isSidebarPopoverOpen || disableTooltip) {
                        setTooltipOpen(false);
                    }
                    else {
                        setTooltipOpen(open);
                    }
                }, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { "data-testid": "more-sidebars-button", className: cn("flex items-center justify-center rounded border border-transparent p-1", "shrink-0 text-gray-400 hover:border-gray-200 hover:bg-gray-50 hover:text-gray-600"), children: _jsx(VerticalDotsIcon, { className: "h-4 w-4" }) }) }) }), _jsx(TooltipContent, { side: "right", children: "More panels" })] }), _jsx(PopoverContent, { "data-testid": "more-sidebars-panel", className: "w-56 p-2", side: side, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), onInteractOutside: (e) => {
                    const target = e.target;
                    if (isDismissBlockedTarget(target)) {
                        e.preventDefault();
                    }
                }, onPointerDownOutside: (e) => {
                    const target = e.target;
                    if (isDismissBlockedTarget(target)) {
                        e.preventDefault();
                    }
                }, onFocusOutside: (e) => {
                    const target = e.target;
                    if (isDismissBlockedTarget(target)) {
                        e.preventDefault();
                    }
                }, children: _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "px-2 py-1 text-[9px] font-medium tracking-wider text-gray-600 uppercase", children: "Sidebars" }), panels.map((panel) => {
                            return (_jsx(NavigationPanelMenuItem, { sidebar: panel, contextValues: contextValues, handlers: handlers, onClick: () => handleSidebarClickAndClosePopover(panel.id) }, `menu-sidebar-${panel.id}`));
                        })] }) })] }));
}
//# sourceMappingURL=MorePanelsButton.js.map