import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useNavigationPanelLogic } from "../hooks/useNavigationPanelLogic";
import { MorePanelsButton } from "./MorePanelsButton";
import { NavigationPanelItem } from "./NavigationPanelItem";
export function WorkspaceRailMobile() {
    const { contextValues, handlers, getVisibleItems, dragOverId } = useNavigationPanelLogic();
    if (!contextValues)
        return null;
    const { workspaceId, sidebars, visibleWorkspaces } = contextValues;
    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);
    if (mobileSidebars.length === 0)
        return null;
    return (_jsx("div", { className: "border-border-default bg-neutral-grey-5/50 flex w-full max-w-full min-w-0 items-center overflow-hidden border-t p-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))]", "data-testid": "bottom-row", children: _jsxs("div", { className: "flex min-w-0 flex-1 flex-row overflow-hidden", children: [_jsx("div", { className: "scrollbar-hide flex min-w-0 gap-1 overflow-x-auto", children: visibleSidebarItems.map((sidebar) => (_jsx(NavigationPanelItem, { sidebar: sidebar, contextValues: contextValues, handlers: handlers, dragOverId: dragOverId, isMobile: true }, `sidebar-${sidebar.id}`))) }), mobileSidebars.length > 0 && (_jsx(MorePanelsButton, { panels: mobileSidebars, contextValues: contextValues, handlers: handlers }))] }) }));
}
//# sourceMappingURL=WorkspaceRailMobile.js.map