import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo } from "react";
import { cn } from "../lib/utils";
import { useEditContext } from "./client/editContext";
import { SidebarStack } from "./sidebar/SidebarStack";
import { Splitter } from "./ui/Splitter";
import { GlobalMenuBar } from "./GlobalMenuBar";
import { Layers } from "lucide-react";
import { MobileLayout } from "./MobileLayout";
import { WorkspaceRail } from "./sidebar/WorkspaceRail";
export default function MainLayout(props) {
    const panels = [];
    const editContext = useEditContext();
    if (!editContext)
        return null;
    const workspace = props.workspace;
    if (editContext.isMobile) {
        return _jsx(MobileLayout, { ...props, workspace: workspace });
    }
    // Get all left sidebar stacks that should be rendered as panels
    // Note: pinnedSidebars only controls toolbar icon visibility, not panel rendering.
    // Stacking is defined by editContext.sidebarStacks; any open sidebars missing from stacks
    // are normalized in the EditorShell and appear as single-item stacks.
    const leftSidebarStacks = useMemo(() => {
        if (!workspace.supportsSidebars) {
            return [];
        }
        const stacks = editContext.sidebarStacks ?? editContext.openSidebars.map((id) => [id]);
        // Filter each stack to left-position sidebars only, and drop empty stacks.
        return stacks
            .map((stack) => stack.filter((id) => {
            const resolved = editContext.getResolvedSidebar(id);
            return resolved !== undefined && resolved.position === "left";
        }))
            .filter((stack) => stack.length > 0);
    }, [
        workspace.supportsSidebars,
        editContext.sidebarStacks,
        editContext.openSidebars,
        editContext.getResolvedSidebar,
    ]);
    const renderedLeftSidebarStacks = leftSidebarStacks;
    // Drag and drop handlers for reordering pinned sidebars
    const handleDragOver = useCallback((e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
    }, []);
    const handleDrop = useCallback((e, targetSidebarId) => {
        e.preventDefault();
        const sourceSidebarId = e.dataTransfer.getData("text/alpaca-sidebar") ||
            e.dataTransfer.getData("text/alpaca-sidebar-icon");
        if (!sourceSidebarId || sourceSidebarId === targetSidebarId) {
            return;
        }
        // Check if source is in open sidebars
        const currentOpen = editContext.openSidebars;
        if (!currentOpen.includes(sourceSidebarId)) {
            return;
        }
        // Check if both source and target are pinned - if so, reorder pinned sidebars
        const currentPinned = editContext.pinnedSidebars;
        const sourceIsPinned = currentPinned.includes(sourceSidebarId);
        const targetIsPinned = currentPinned.includes(targetSidebarId);
        if (sourceIsPinned && targetIsPinned) {
            // Reorder pinned sidebars (toolbar icon order)
            const sourceIndex = currentPinned.indexOf(sourceSidebarId);
            const targetIndex = currentPinned.indexOf(targetSidebarId);
            let effectiveBefore;
            if (sourceIndex < targetIndex) {
                effectiveBefore = false;
            }
            else {
                effectiveBefore = true;
            }
            const newPinned = currentPinned.filter((n) => n !== sourceSidebarId);
            const newTargetIndex = newPinned.indexOf(targetSidebarId);
            const baseIndex = newTargetIndex >= 0 ? newTargetIndex : newPinned.length - 1;
            const insertIndex = effectiveBefore
                ? Math.max(0, baseIndex)
                : Math.max(0, baseIndex + 1);
            newPinned.splice(insertIndex, 0, sourceSidebarId);
            editContext.reorderPinnedSidebars(newPinned);
        }
        // Always reorder open sidebars (panel display order)
        const sourceIndex = currentOpen.indexOf(sourceSidebarId);
        const targetIndex = currentOpen.indexOf(targetSidebarId);
        let effectiveBefore;
        if (sourceIndex < targetIndex) {
            effectiveBefore = false;
        }
        else {
            effectiveBefore = true;
        }
        const newOpen = currentOpen.filter((n) => n !== sourceSidebarId);
        const newTargetIndex = newOpen.indexOf(targetSidebarId);
        const baseIndex = newTargetIndex >= 0 ? newTargetIndex : newOpen.length - 1;
        const insertIndex = effectiveBefore
            ? Math.max(0, baseIndex)
            : Math.max(0, baseIndex + 1);
        newOpen.splice(insertIndex, 0, sourceSidebarId);
        editContext.reorderOpenSidebars(newOpen);
    }, [editContext]);
    // Render each sidebar stack as its own splitter panel (one column per stack).
    renderedLeftSidebarStacks.forEach((stackIds) => {
        const firstId = stackIds[0];
        if (!firstId)
            return;
        const firstResolved = editContext.getResolvedSidebar(firstId);
        panels.push({
            name: stackIds.length === 1
                ? `sidebar-${firstId}`
                : `sidebarStack-${stackIds.join("-")}`,
            defaultSize: firstResolved?.defaultWidth ?? 350,
            content: (_jsx(SidebarStack, { sidebarIds: stackIds, editContext: editContext, onDragOver: handleDragOver, onDrop: (e, targetSidebarId) => handleDrop(e, targetSidebarId) })),
        });
    });
    panels.push({
        name: "center",
        defaultSize: "auto",
        content: props.centerPanelView,
    });
    if (props.rightSidebar) {
        panels.push({
            name: "rightSidebar",
            defaultSize: 250,
            content: props.rightSidebar,
            collapsible: false,
        });
    }
    if (props.farRightSidebar) {
        panels.push({
            name: "farRightSidebar",
            defaultSize: 600,
            content: props.farRightSidebar,
            collapsible: false,
        });
    }
    if (props.helpTerminal) {
        panels.push({
            name: "helpTerminal",
            defaultSize: 500,
            content: props.helpTerminal,
            collapsible: false,
        });
    }
    let className = props.className;
    if (!editContext?.configuration.editor.embedded) {
        className = cn("absolute inset-0", props.className);
    }
    // Show GlobalMenuBar unless workspace explicitly hides it (e.g., Home workspace)
    const showMenuBar = !workspace.hideToolbar;
    // Left sidebars exist only if workspace supports them AND there are available left sidebars
    const hasAvailableSidebars = useMemo(() => {
        if (!workspace.supportsSidebars)
            return false;
        const availableSidebars = editContext.availableSidebars ?? [];
        return availableSidebars.some((s) => s.position === "left" && !s.hidden);
    }, [workspace.supportsSidebars, editContext.availableSidebars]);
    const showWorkspaceRail = !workspace.hideToolbar;
    const showSidebarIcons = showWorkspaceRail && workspace.supportsSidebars && hasAvailableSidebars;
    return (_jsx("div", { className: cn("flex h-full w-full flex-col font-normal select-none", className), children: _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [showWorkspaceRail && (_jsx(WorkspaceRail, { showSidebarIcons: showSidebarIcons })), _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [workspace.menuBar !== undefined
                            ? workspace.menuBar
                            : showMenuBar && _jsx(GlobalMenuBar, {}), workspace?.toolbarFactory && (_jsx("div", { className: "w-full shrink-0", children: workspace.toolbarFactory(editContext) })), _jsx("div", { className: "bg-gray-4 flex-1 overflow-hidden", children: _jsx(Splitter, { splitterClassName: "bg-transparent -mr-1.5 md:w-[6px]", localStorageKey: "editor.panelSizes", expandLabel: _jsxs("div", { className: "flex items-center justify-center", children: [_jsx(Layers, { size: 14 }), _jsxs("div", { className: "mt-3", children: [props.rightSidebarTitle, " "] })] }), panels: panels }) })] })] }) }));
}
//# sourceMappingURL=MainLayout.js.map