import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Splitter } from "../ui/Splitter";
/**
 * Renders the multi-pane grid using the existing Splitter component.
 *
 * - Single row → one Splitter with direction="horizontal".
 * - Single column ("vertical" orientation) → one Splitter with direction="vertical".
 * - 2-D grid → outer vertical Splitter wrapping per-row horizontal Splitters.
 *
 * Splitter persists panel sizes via its own localStorageKey. Because Splitter
 * reads stored sizes only at mount, we derive the key from the pane *count*
 * (not pane ids) so that splitting + immediately reassigning content doesn't
 * reset the divider. Trade-off: a row with the same count but different
 * agents inherits the previous sizes — acceptable; user can drag again.
 *
 * The Splitter is also remounted (key=) when the count changes so the new
 * shape gets fresh sizes.
 */
export function AgentPanesGrid({ layout, focusedPaneId, renderPane, onPaneMouseDownCapture, }) {
    const isGrid = layout.rows.length > 1;
    const isVertical = layout.orientation === "vertical";
    const totalPaneCount = layout.rows.reduce((sum, r) => sum + r.length, 0);
    if (!isGrid) {
        const row = layout.rows[0];
        if (!row)
            return null;
        return (_jsx(SplitterRow, { rowIndex: 0, panes: row, direction: isVertical ? "vertical" : "horizontal", focusedPaneId: focusedPaneId, totalPaneCount: totalPaneCount, renderPane: renderPane, onPaneMouseDownCapture: onPaneMouseDownCapture }));
    }
    // Grid mode: outer vertical Splitter, one panel per row, each panel is an
    // inner horizontal Splitter. Outer key includes row count so resizes don't
    // bleed across shape changes.
    const outerKey = `agent-panes:outer:rows=${layout.rows.length}`;
    const outerPanels = layout.rows.map((row, rowIndex) => ({
        name: `row-${rowIndex}`,
        defaultSize: "auto",
        content: (_jsx(SplitterRow, { rowIndex: rowIndex, panes: row, direction: "horizontal", focusedPaneId: focusedPaneId, totalPaneCount: totalPaneCount, renderPane: renderPane, onPaneMouseDownCapture: onPaneMouseDownCapture })),
    }));
    return (_jsx(Splitter, { panels: outerPanels, direction: "vertical", localStorageKey: outerKey, className: "h-full w-full" }, outerKey));
}
function SplitterRow({ rowIndex, panes, direction, focusedPaneId, totalPaneCount, renderPane, onPaneMouseDownCapture, }) {
    if (panes.length === 0)
        return null;
    // Key derived from count (not ids) so dividers survive content swaps.
    const splitterKey = `agent-panes:row:${rowIndex}:dir=${direction}:n=${panes.length}`;
    if (panes.length === 1) {
        // No splitter needed for a single pane; rendering Splitter with one
        // panel still works but adds DOM overhead.
        const pane = panes[0];
        if (!pane)
            return null;
        return (_jsx(PaneContainer, { pane: pane, isFocused: pane.id === focusedPaneId, showFocusRing: totalPaneCount > 1, onMouseDownCapture: onPaneMouseDownCapture, children: renderPane(pane, pane.id === focusedPaneId) }));
    }
    const panels = panes.map((pane, i) => ({
        name: `pane-${i}`,
        defaultSize: "auto",
        content: (_jsx(PaneContainer, { pane: pane, isFocused: pane.id === focusedPaneId, showFocusRing: totalPaneCount > 1, onMouseDownCapture: onPaneMouseDownCapture, children: renderPane(pane, pane.id === focusedPaneId) })),
    }));
    return (_jsx(Splitter, { panels: panels, direction: direction, localStorageKey: splitterKey, className: "h-full w-full" }, splitterKey));
}
function PaneContainer({ pane, isFocused, showFocusRing, onMouseDownCapture, children, }) {
    return (_jsxs("div", { "data-pane-id": pane.id, className: "relative h-full w-full", onMouseDownCapture: () => onMouseDownCapture(pane.id), children: [children, isFocused && showFocusRing && (_jsx("div", { "aria-hidden": true, className: "ring-highlight-100/40 pointer-events-none absolute inset-0 ring-2 ring-inset" }))] }));
}
//# sourceMappingURL=AgentPanesGrid.js.map