import { jsx as _jsx } from "react/jsx-runtime";
import React, { useMemo } from "react";
import { Splitter } from "../ui/Splitter";
import { SidebarPanel } from "./SidebarPanel";
function toSidebarPanelModel(sidebar) {
    return {
        title: sidebar.title,
        icon: sidebar.icon,
        panels: sidebar.panels.map((panel) => {
            // Panel.icon in the new sidebar system is ReactNode, but the legacy `Panel`
            // type only accepts string or JSX.Element. Filter unsupported icon shapes.
            const icon = panel.icon &&
                typeof panel.icon !== "string" &&
                !React.isValidElement(panel.icon)
                ? undefined
                : panel.icon;
            return {
                name: panel.name,
                title: panel.title,
                icon,
                content: panel.content,
                initialSize: panel.initialSize ?? 50,
                header: panel.header,
                noOverflow: panel.noOverflow,
            };
        }),
    };
}
export function SidebarStack({ sidebarIds, editContext, onDragOver, onDrop, suppressStackDropZones = false, }) {
    const resolvedSidebars = useMemo(() => {
        return sidebarIds
            .map((id) => editContext.getResolvedSidebar(id))
            .filter((s) => s !== undefined);
    }, [sidebarIds, editContext]);
    // Check if any sidebar in this stack is locked (stack-level lock)
    const isStackLocked = useMemo(() => {
        return sidebarIds.some((id) => editContext.lockedSidebars.includes(id));
    }, [sidebarIds, editContext.lockedSidebars]);
    if (resolvedSidebars.length === 0) {
        return null;
    }
    if (resolvedSidebars.length === 1) {
        const sidebar = resolvedSidebars[0];
        if (!sidebar) {
            return null;
        }
        return (_jsx(SidebarPanel, { sidebar: toSidebarPanelModel(sidebar), editContext: editContext, active: true, onClose: () => editContext.toggleSidebar(sidebar.id, { forceClose: true }), sidebarId: sidebar.id, onDragOver: onDragOver, onDrop: (e) => onDrop?.(e, sidebar.id), isFirstInStack: true, isStackLocked: isStackLocked, suppressStackDropZones: suppressStackDropZones }));
    }
    const splitterPanels = resolvedSidebars.map((sidebar, index) => ({
        name: `sidebar-${sidebar.id}`,
        defaultSize: Math.round(100 / resolvedSidebars.length),
        content: (_jsx(SidebarPanel, { sidebar: toSidebarPanelModel(sidebar), editContext: editContext, active: true, onClose: () => editContext.toggleSidebar(sidebar.id, { forceClose: true }), sidebarId: sidebar.id, onDragOver: onDragOver, onDrop: (e) => onDrop?.(e, sidebar.id), isFirstInStack: index === 0, isStackLocked: isStackLocked, suppressStackDropZones: suppressStackDropZones })),
    }));
    return (_jsx(Splitter, { direction: "vertical", panels: splitterPanels, localStorageKey: `sidebar-stack-${editContext.workspaceId}-${splitterPanels
            .map((p) => p.name)
            .join("-")}`, className: "h-full" }));
}
//# sourceMappingURL=SidebarStack.js.map