import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useNavigationPanelLogic } from "../hooks/useNavigationPanelLogic";
import { MobileWorkspacePopover } from "./MobileWorkspacePopover";
import { MorePanelsButton } from "./MorePanelsButton";
import { NavigationPanelItem } from "./NavigationPanelItem";
export const Separator = () => (_jsx("div", { className: "bg-border-default mx-1 flex h-5 w-px self-center justify-self-center" }));
export function WorkspaceRailMobile() {
    const { contextValues, handlers, getVisibleItems, dragOverId } = useNavigationPanelLogic();
    if (!contextValues)
        return null;
    const { workspaceId, sidebars, showSidebarLabels, 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", { className: "border-border-default bg-neutral-grey-5/50 grid w-full max-w-full min-w-0 grid-cols-[auto_12px_minmax(0,1fr)] items-center justify-between gap-0 overflow-hidden border-t 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, showSidebarLabels: showSidebarLabels })), visibleSidebarItems.length > 0 ? _jsx(Separator, {}) : _jsx("div", {}), _jsxs("div", { className: "flex min-w-0 flex-row overflow-hidden", children: [_jsx("div", { className: "scrollbar-hide flex min-w-0 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 }))] })] }));
}
//# sourceMappingURL=WorkspaceRailMobile.js.map