import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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";
export function MobileLayout(props) {
    const editContext = useEditContext();
    const openSidebarIdsForStack = !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;
        });
    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-gray-3 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?.titlebar, 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