import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef } from "react";
import { cn } from "../lib/utils";
import { useEditContext } from "./client/editContext";
import { EditorForm } from "./page-viewer/EditorForm";
import { SidebarStack } from "./sidebar/SidebarStack";
import { WorkspaceRailMobile } from "./sidebar/WorkspaceRailMobile";
import { Splitter } from "./ui/Splitter";
import { EditorSlotContextProvider } from "./views/editorSlotContext";
import { GlobalMenuBar } from "./GlobalMenuBar";
export function MobileLayout(props) {
    const editContext = useEditContext();
    const openSidebarIdsForStack = useMemo(() => !editContext || !props.workspace?.supportsSidebars
        ? []
        : editContext.openSidebars.filter((id) => {
            const resolved = editContext.getResolvedSidebar(id);
            if (!resolved)
                return false;
            if (resolved.position === "left")
                return true;
            if (editContext.isMobile && id === "agents-panel")
                return true;
            return false;
        }), [editContext, props.workspace?.supportsSidebars]);
    // Mobile renders sidebars (incl. the Agents panel) by mounting/unmounting a
    // Splitter panel rather than animating an `animatedCollapse` collapse, so the
    // Splitter never emits a transitionend for them and `onPanelTransitionEnd` is
    // not wired here. Report settle to the registry once the new layout has been
    // committed and painted (double rAF) so awaiters such as the Show-me
    // openAgentsPanel resolve event-driven on mobile instead of falling back to
    // the 1.5s safety timeout. Notify both the previous and current ids so opens
    // and closes both resolve their `sidebar:<id>` key.
    const openSidebarStackKey = openSidebarIdsForStack.join("|");
    const previousSidebarIdsRef = useRef([]);
    const notifySurfaceSettled = editContext?.notifySurfaceSettled;
    useEffect(() => {
        const previous = previousSidebarIdsRef.current;
        const current = openSidebarStackKey ? openSidebarStackKey.split("|") : [];
        previousSidebarIdsRef.current = current;
        if (!notifySurfaceSettled)
            return;
        const settledIds = Array.from(new Set([...previous, ...current]));
        if (settledIds.length === 0)
            return;
        let raf2 = 0;
        const raf1 = window.requestAnimationFrame(() => {
            raf2 = window.requestAnimationFrame(() => {
                settledIds.forEach((id) => notifySurfaceSettled(`sidebar:${id}`));
            });
        });
        return () => {
            window.cancelAnimationFrame(raf1);
            window.cancelAnimationFrame(raf2);
        };
    }, [openSidebarStackKey, notifySurfaceSettled]);
    if (!editContext)
        return null;
    const isEditorWorkspace = editContext.workspaceId === "editor";
    const showMobileEditorPanel = isEditorWorkspace && editContext.mobileEditorPanelOpen;
    const activeSlotContext = showMobileEditorPanel
        ? editContext.getActiveSlotContext()
        : undefined;
    let className = props.className;
    if (!editContext?.configuration.editor.embedded) {
        className = cn("fixed inset-0", props.className);
    }
    const panels = [
        {
            name: "center",
            defaultSize: "auto",
            content: props.centerPanelView,
        },
    ];
    // Bottom panel: show either editor form OR sidebar stack (mutually exclusive)
    if (showMobileEditorPanel && activeSlotContext) {
        panels.push({
            name: "mobile-editor-form",
            defaultSize: 300,
            content: (_jsx(EditorSlotContextProvider, { value: activeSlotContext, children: _jsx("div", { className: "border-border-default flex h-full w-full flex-col rounded-md border bg-white", children: _jsx("div", { className: "flex-1", children: _jsx(EditorForm, { readonly: editContext.mode !== "edit", compareView: false, onCollapse: () => editContext.setMobileEditorPanelOpen(false) }) }) }) })),
        });
    }
    else if (openSidebarIdsForStack.length > 0) {
        const firstResolved = editContext.getResolvedSidebar(openSidebarIdsForStack[0]);
        panels.push({
            name: `open-sidebar-${openSidebarIdsForStack.join("-")}`,
            defaultSize: firstResolved?.defaultWidth ?? 250,
            content: (_jsx(SidebarStack, { sidebarIds: openSidebarIdsForStack, editContext: editContext })),
        });
    }
    const detachedSidebarContent = props.rightSidebar;
    if (detachedSidebarContent) {
        panels.push({
            name: "detachedSidebar",
            defaultSize: 400,
            content: detachedSidebarContent,
            collapsible: false,
        });
    }
    return (_jsxs("div", { className: cn("flex flex-col select-none", className), "data-testid": "mobile-layout", children: [props.workspace.menuBar !== undefined
                ? props.workspace.menuBar
                : !props.workspace.hideToolbar && _jsx(GlobalMenuBar, {}), props.workspace?.toolbarFactory &&
                props.workspace?.toolbarFactory(editContext), _jsx(Splitter, { panels: panels, direction: "vertical", className: "flex-1", localStorageKey: "mobile-layout-splitter" }), !props.workspace?.hideToolbar && _jsx(WorkspaceRailMobile, {})] }));
}
//# sourceMappingURL=MobileLayout.js.map