import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useEffect } from "react";
import { TooltipProvider } from "../../components/ui/tooltip";
import { NavigationPanelItem } from "./NavigationPanelItem";
import { MorePanelsButton } from "./MorePanelsButton";
import { useNavigationPanelLogic } from "../hooks/useNavigationPanelLogic";
import { LabelButton } from "./LabelButton";
import { WorkspaceButton } from "./WorkspaceButton";
import { HomeButton } from "../ui/HomeButton";
import { HelpButton } from "../menubar/toolbar-sections/HelpButton";
function isTyping(event) {
    const target = event.target;
    if (!target)
        return false;
    const el = target.nodeType === 3 ? target.parentElement : target;
    if (!el)
        return false;
    const tag = el.tagName?.toLowerCase?.() || "";
    if (tag === "input" || tag === "textarea" || tag === "select")
        return true;
    if (el.isContentEditable)
        return true;
    return !!el.closest('input,textarea,select,[contenteditable=""],[contenteditable="true"],[role="textbox"]');
}
const Separator = () => _jsx("div", { className: "my-1 h-0.5 w-6 shrink-0 bg-gray-300" });
export function WorkspaceRail({ showSidebarIcons }) {
    const { contextValues, handlers, dragOverId, getVisibleItems } = useNavigationPanelLogic();
    useEffect(() => {
        if (!contextValues)
            return;
        const workspaces = (contextValues.visibleWorkspaces ?? [])
            .filter((workspace) => !workspace.hidden && workspace.id !== "home")
            .sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100));
        const handleKeyDown = (event) => {
            if (event.altKey &&
                !event.ctrlKey &&
                !event.metaKey &&
                !isTyping(event)) {
                const numMatch = event.key.match(/^[1-9]$/);
                if (numMatch) {
                    const index = parseInt(event.key, 10) - 1;
                    if (index >= 0 && index < workspaces.length) {
                        event.preventDefault();
                        handlers.onWorkspaceClick(workspaces[index]?.id ?? "home");
                    }
                }
            }
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
    }, [contextValues, handlers]);
    if (!contextValues)
        return null;
    const { visibleWorkspaces, workspaceId, sidebars, showLabels } = contextValues;
    const leftSidebars = sidebars
        .filter((sidebar) => sidebar.position === "left" && !sidebar.hidden)
        .sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100));
    const workspaces = (visibleWorkspaces ?? [])
        .filter((workspace) => !workspace.hidden && workspace.id !== "home")
        .sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100));
    const settingsIndex = workspaces.findIndex((workspace) => workspace.id === "settings");
    if (settingsIndex >= 0) {
        const settings = workspaces[settingsIndex];
        if (settings) {
            workspaces.splice(settingsIndex, 1);
            workspaces.push(settings);
        }
    }
    const visibleItems = getVisibleItems(leftSidebars);
    if (workspaces.length === 0)
        return null;
    return (_jsx(TooltipProvider, { delayDuration: 500, skipDelayDuration: 0, children: _jsxs("div", { className: "flex h-full min-h-0 w-[53px] flex-col items-center gap-1.5 border-r border-gray-200 bg-gray-50/50 px-2 py-2 pt-1.5", "data-testid": "workspace-rail", children: [_jsx(HomeButton, { className: "mb-1 rounded-lg p-1 hover:scale-110" }), workspaces.map((workspace, index) => {
                    const active = workspace.id === workspaceId;
                    const numberKey = index < 9 ? `${index + 1}` : undefined;
                    const isSettings = workspace.id === "settings";
                    return (_jsxs(React.Fragment, { children: [isSettings && showSidebarIcons && leftSidebars.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "scrollbar-hide flex flex-col gap-1 overflow-scroll", children: [visibleItems.map((sidebar) => (_jsx(NavigationPanelItem, { sidebar: sidebar, contextValues: contextValues, handlers: handlers, dragOverId: dragOverId }, `sidebar-${sidebar.id}`))), _jsx(MorePanelsButton, { panels: leftSidebars, contextValues: contextValues, handlers: handlers, side: "right" })] })] })), isSettings && _jsx("div", { className: "flex-1" }), isSettings && workspaceId === "editor" && (_jsxs(_Fragment, { children: [_jsx(LabelButton, { showLabels: showLabels, toggleShowLabels: handlers.onToggleLabels }), _jsx(Separator, {})] })), isSettings && (_jsx(HelpButton, { className: "h-9 w-9 rounded-md border border-transparent p-0 text-gray-500 hover:border-gray-200 hover:bg-gray-50 hover:text-gray-800 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:p-0" })), _jsx(WorkspaceButton, { active: active, onClick: () => handlers.onWorkspaceClick(workspace.id), workspace: workspace, numberKey: numberKey })] }, workspace.id));
                })] }) }));
}
//# sourceMappingURL=WorkspaceRail.js.map