import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, useRef, useCallback } from "react";
import MainLayout from "../../MainLayout";
import { SidebarPanel } from "../../sidebar/SidebarPanel";
import { ManualPanel } from "../../ai/ManualPanel";
import { AppPortalContainerProvider, APP_PORTAL_CONTAINER_ID, } from "../../../components/ui/portal-container-context";
import { localStorageService } from "../../services/localStorageService";
export const HELP_PANEL_WIDTH = 400;
const HELP_PANEL_MIN_WIDTH = 300;
const HELP_PANEL_MAX_WIDTH = 800;
const HELP_PANEL_STORAGE_KEY = "help-panel-width";
export function EditorChrome(props) {
    const { className, currentWorkspace, centerPanelView, editContext, showAgentsPanel, handleSetShowAgentsPanel, workspaceId, } = props;
    const agentsPanelSidebar = editContext.availableSidebars?.find((s) => s.id === "agents-panel");
    const noAgentsPanelWorkspaces = ["home", "settings", "agents", "taskboard"];
    const showHelpPanel = editContext.showHelpTerminal && !!editContext.currentItemDescriptor;
    const [helpPanelWidth, setHelpPanelWidth] = useState(() => {
        const stored = localStorageService.getString(HELP_PANEL_STORAGE_KEY);
        if (stored) {
            const parsed = parseInt(stored, 10);
            if (!isNaN(parsed) &&
                parsed >= HELP_PANEL_MIN_WIDTH &&
                parsed <= HELP_PANEL_MAX_WIDTH) {
                return parsed;
            }
        }
        return HELP_PANEL_WIDTH;
    });
    const isResizingRef = useRef(false);
    const startXRef = useRef(0);
    const startWidthRef = useRef(0);
    const handleResizeStart = useCallback((e) => {
        e.preventDefault();
        isResizingRef.current = true;
        startWidthRef.current = helpPanelWidth;
        const clientX = "touches" in e ? (e.touches[0]?.clientX ?? 0) : e.clientX;
        startXRef.current = clientX;
        const iframes = document.querySelectorAll("iframe");
        iframes.forEach((iframe) => {
            iframe.style.pointerEvents = "none";
        });
        document.body.style.cursor = "ew-resize";
        document.body.style.userSelect = "none";
    }, [helpPanelWidth]);
    useEffect(() => {
        const handleMouseMove = (e) => {
            if (!isResizingRef.current)
                return;
            const delta = startXRef.current - e.clientX;
            const newWidth = Math.min(HELP_PANEL_MAX_WIDTH, Math.max(HELP_PANEL_MIN_WIDTH, startWidthRef.current + delta));
            setHelpPanelWidth(newWidth);
        };
        const handleTouchMove = (e) => {
            if (!isResizingRef.current)
                return;
            const touch = e.touches[0];
            if (!touch)
                return;
            const delta = startXRef.current - touch.clientX;
            const newWidth = Math.min(HELP_PANEL_MAX_WIDTH, Math.max(HELP_PANEL_MIN_WIDTH, startWidthRef.current + delta));
            setHelpPanelWidth(newWidth);
        };
        const handleEnd = () => {
            if (!isResizingRef.current)
                return;
            isResizingRef.current = false;
            const iframes = document.querySelectorAll("iframe");
            iframes.forEach((iframe) => {
                iframe.style.pointerEvents = "";
            });
            document.body.style.cursor = "";
            document.body.style.userSelect = "";
        };
        window.addEventListener("mousemove", handleMouseMove);
        window.addEventListener("mouseup", handleEnd);
        window.addEventListener("touchmove", handleTouchMove);
        window.addEventListener("touchend", handleEnd);
        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleEnd);
            window.removeEventListener("touchmove", handleTouchMove);
            window.removeEventListener("touchend", handleEnd);
        };
    }, []);
    useEffect(() => {
        localStorageService.setString(HELP_PANEL_STORAGE_KEY, String(helpPanelWidth));
    }, [helpPanelWidth]);
    useEffect(() => {
        const workspaceTitle = currentWorkspace.title;
        const activeSlotContext = editContext.getActiveSlotContext?.();
        const currentItemName = editContext.currentItemDescriptor?.displayName ||
            editContext.currentItemDescriptor?.name ||
            editContext.item?.descriptor?.displayName ||
            editContext.item?.descriptor?.name ||
            editContext.item?.name ||
            editContext.page?.item?.displayName ||
            editContext.page?.item?.name ||
            activeSlotContext?.item?.descriptor?.displayName ||
            activeSlotContext?.item?.descriptor?.name ||
            activeSlotContext?.item?.name ||
            activeSlotContext?.itemDescriptor?.displayName ||
            activeSlotContext?.itemDescriptor?.name;
        document.title = currentItemName
            ? `${currentItemName} - Parhelia`
            : `${workspaceTitle} - Parhelia`;
    }, [
        currentWorkspace.title,
        editContext.currentItemDescriptor?.displayName,
        editContext.currentItemDescriptor?.name,
        editContext.item?.descriptor?.displayName,
        editContext.item?.descriptor?.name,
        editContext.item?.name,
        editContext.page?.item?.displayName,
        editContext.page?.item?.name,
        editContext.activeSlotId,
        editContext.editorSlots,
    ]);
    const [appContainer, setAppContainer] = useState(null);
    const appContainerRef = useCallback((node) => {
        setAppContainer(node);
    }, []);
    return (_jsxs("div", { className: "fixed inset-0 flex h-dvh w-screen overflow-hidden overscroll-behavior-none", children: [_jsx("div", { ref: appContainerRef, id: APP_PORTAL_CONTAINER_ID, className: "relative min-w-0 flex-1", style: { transform: "translateZ(0)" }, children: _jsx(AppPortalContainerProvider, { value: appContainer, children: _jsx(MainLayout, { className: className, workspace: currentWorkspace, centerPanelView: centerPanelView, farRightSidebar: showAgentsPanel &&
                            !noAgentsPanelWorkspaces.includes(workspaceId) &&
                            agentsPanelSidebar && (_jsx(SidebarPanel, { sidebar: {
                                title: agentsPanelSidebar.title,
                                panels: agentsPanelSidebar.panels.map((p) => typeof p === "function" ? p(editContext) : p),
                            }, editContext: editContext, active: true, detached: true, paddingRight: true, onClose: () => handleSetShowAgentsPanel(false) })), farRightSidebarTitle: "AGENTS" }) }) }), showHelpPanel && (_jsxs("div", { className: "relative flex h-full shrink-0 border-l border-gray-200 bg-white", style: { width: helpPanelWidth }, "data-testid": "help-panel", "data-help-panel": "true", children: [_jsx("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-1.5 cursor-ew-resize bg-transparent transition-colors hover:bg-blue-500/40 active:bg-blue-500/60", onMouseDown: handleResizeStart, onTouchStart: handleResizeStart, title: "Drag to resize" }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(ManualPanel, {}) })] }))] }));
}
//# sourceMappingURL=EditorChrome.js.map