import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useNavigationPanelLogic } from "../hooks/useNavigationPanelLogic";
import { LabelButton } from "./LabelButton";
import { MobileWorkspacePopover } from "./MobileWorkspacePopover";
import { MorePanelsButton } from "./MorePanelsButton";
import { NavigationPanelItem } from "./NavigationPanelItem";
export const Separator = () => (_jsx("div", { className: "flex justify-self-center self-center mx-1 h-5 w-px bg-gray-200" }));
export function WorkspaceRailMobile() {
    const { contextValues, handlers, getVisibleItems, dragOverId } = useNavigationPanelLogic();
    if (!contextValues)
        return null;
    const { workspaceId, sidebars, showLabels, visibleWorkspaces } = contextValues;
    const isEditorWorkspace = workspaceId === "editor";
    const currentWorkspace = visibleWorkspaces?.find((w) => w.id === workspaceId);
    const hasSidebars = currentWorkspace?.supportsSidebars ?? false;
    const mobileSidebars = hasSidebars
        ? sidebars
            .filter((sidebar) => sidebar.position === "left" &&
            !sidebar.hidden)
            .sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100))
        : [];
    const visibleSidebarItems = getVisibleItems(mobileSidebars);
    const mobileWorkspaces = (visibleWorkspaces ?? [])
        .filter((workspace) => !workspace.hidden && workspace.id !== "home")
        .sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100));
    // Sort settings to the end
    const settingsIndex = mobileWorkspaces.findIndex((workspace) => workspace.id === "settings");
    if (settingsIndex >= 0) {
        const [settings] = mobileWorkspaces.splice(settingsIndex, 1);
        if (settings)
            mobileWorkspaces.push(settings);
    }
    return (_jsxs("div", { style: {
            "--sep-left": showLabels ? "16px" : "12px",
            "--sep-right": showLabels ? "16px" : "4px",
        }, className: "min-w-0 w-full max-w-full overflow-hidden grid grid-cols-[auto_var(--sep-left)_minmax(0,1fr)_var(--sep-right)_auto] justify-between items-center gap-0 border-t border-gray-200 bg-gray-50/50 p-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))]", "data-testid": "bottom-row", children: [mobileWorkspaces.length > 0 && (_jsx(MobileWorkspacePopover, { workspaces: mobileWorkspaces, currentWorkspaceId: workspaceId, onWorkspaceSelect: handlers.onWorkspaceClick, showLabels: showLabels })), visibleSidebarItems.length > 0
                ? (_jsx(Separator, {}))
                : _jsx("div", {}), _jsxs("div", { className: "min-w-0 overflow-hidden flex flex-row", children: [_jsx("div", { className: "min-w-0 scrollbar-hide flex gap-1 overflow-x-auto", children: isEditorWorkspace &&
                            visibleSidebarItems.map((sidebar) => (_jsx(NavigationPanelItem, { sidebar: sidebar, contextValues: contextValues, handlers: handlers, dragOverId: dragOverId, isMobile: true }, `sidebar-${sidebar.id}`))) }), isEditorWorkspace && mobileSidebars.length > 0 && (_jsx(MorePanelsButton, { panels: mobileSidebars, contextValues: contextValues, handlers: handlers }))] }), visibleSidebarItems.length > 0
                ? (_jsx(Separator, {}))
                : _jsx("div", {}), _jsx(LabelButton, { showLabels: showLabels, toggleShowLabels: handlers.onToggleLabels, isMobile: true })] }));
}
//# sourceMappingURL=WorkspaceRailMobile.js.map