"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { ReactFlow, Controls, MiniMap, Background, BackgroundVariant, MarkerType, SelectionMode, } from "@xyflow/react";
import { WorkflowNode } from "./WorkflowNode";
import { CanvasTransitionEdge } from "./CanvasTransitionEdge";
import { CATEGORY_COLORS } from "./canvas-constants";
import { CANVAS_TASK_NODE_TYPE, CANVAS_TRANSITION_EDGE_TYPE } from "./workflow-graph-conversions";
const nodeTypes = {
    [CANVAS_TASK_NODE_TYPE]: WorkflowNode,
};
const edgeTypes = {
    [CANVAS_TRANSITION_EDGE_TYPE]: CanvasTransitionEdge,
};
const defaultEdgeOptions = {
    markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },
};
const DELETE_KEY_CODES = ["Backspace", "Delete"];
/**
 * Inner React Flow canvas, loaded via React.lazy from WorkflowCanvasEditor.
 *
 * Isolated into its own file so that `@xyflow/react` (and its CSS) are only
 * included in the bundle when the canvas editor is actually rendered.
 *
 * @internal
 */
export function WorkflowCanvasInner({ nodes, edges, onNodesChange, onEdgesChange, onNodeClick, onEdgeClick, onPaneClick, onConnect, isValidConnection, onDrop, onDragOver, onNodesDelete, onEdgesDelete, onNodeContextMenu, onEdgeContextMenu, onPaneContextMenu, onSelectionContextMenu, nodeErrors, }) {
    const enrichedNodes = useMemo(() => {
        if (!nodeErrors || nodeErrors.size === 0)
            return nodes;
        return nodes.map((node) => {
            const data = node.data;
            const errors = data?.taskName ? nodeErrors.get(data.taskName) : undefined;
            if (!errors || errors.length === 0)
                return node;
            return { ...node, data: { ...node.data, errorCount: errors.length } };
        });
    }, [nodes, nodeErrors]);
    const minimapNodeColor = useMemo(() => (node) => {
        const data = node.data;
        const category = data?.category;
        if (!category)
            return "var(--stgm-muted-foreground, #737373)";
        return CATEGORY_COLORS[category] ?? "var(--stgm-muted-foreground, #737373)";
    }, []);
    return (_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onPaneClick: onPaneClick, onConnect: onConnect, isValidConnection: isValidConnection, onDrop: onDrop, onDragOver: onDragOver, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onNodeContextMenu: onNodeContextMenu, onEdgeContextMenu: onEdgeContextMenu, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, nodeTypes: nodeTypes, edgeTypes: edgeTypes, defaultEdgeOptions: defaultEdgeOptions, deleteKeyCode: DELETE_KEY_CODES, selectionMode: SelectionMode.Partial, multiSelectionKeyCode: "Shift", panOnDrag: [1, 2], selectionOnDrag: true, fitView: true, fitViewOptions: { padding: 0.2 }, minZoom: 0.2, maxZoom: 3, proOptions: { hideAttribution: true }, className: "h-full w-full", children: [_jsx(Controls, { showInteractive: false, className: "!border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-card,var(--stgm-background,#fff))] !shadow-sm [&>button]:!border-[var(--stgm-border-prominent,#d4d4d8)] [&>button]:!bg-[var(--stgm-card,var(--stgm-background,#fff))] [&>button]:!fill-[var(--stgm-foreground,#1a1a2e)] [&>button:hover]:!bg-[var(--stgm-muted,#f5f5f5)]" }), _jsx(MiniMap, { nodeColor: minimapNodeColor, maskColor: "var(--stgm-muted, rgba(245, 245, 245, 0.7))", className: "!border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-card,var(--stgm-background,#fff))]" }), _jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1, color: "var(--stgm-muted-foreground, #737373)" })] }));
}
//# sourceMappingURL=WorkflowCanvasInner.js.map