"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.WorkflowCanvas = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Workflow Canvas Component
 * Renders the interactive workflow diagram using react-flow
 */
const react_1 = require("react");
const react_2 = require("@chakra-ui/react");
const reactflow_1 = __importStar(require("reactflow"));
require("reactflow/dist/style.css");
const WorkflowNode_1 = require("./WorkflowNode");
const nodeTypes = {
    workflowNode: WorkflowNode_1.WorkflowNode,
};
const WorkflowCanvas = ({ workflow, onNodeSelect, onEdgeSelect, onNodesChange, onEdgesChange, readOnly = false, }) => {
    const bgColor = (0, react_2.useColorModeValue)('gray.50', 'gray.900');
    const nodeBgColor = (0, react_2.useColorModeValue)('white', 'gray.800');
    // Convert workflow nodes to react-flow nodes
    const initialNodes = (0, react_1.useMemo)(() => workflow.nodes.map((node) => ({
        id: node.id,
        type: 'workflowNode',
        position: node.position || { x: 0, y: 0 },
        data: {
            ...node,
            onSelect: () => onNodeSelect?.(node),
        },
    })), [workflow.nodes, onNodeSelect]);
    // Convert workflow edges to react-flow edges
    const initialEdges = (0, react_1.useMemo)(() => workflow.edges.map((edge) => ({
        id: edge.id,
        source: edge.source,
        target: edge.target,
        type: 'smoothstep',
        animated: edge.animated,
        style: {
            stroke: edge.style?.color || '#64748b',
            strokeWidth: edge.style?.width || 2,
        },
        data: {
            ...edge,
            onSelect: () => onEdgeSelect?.(edge),
        },
    })), [workflow.edges, onEdgeSelect]);
    const [nodes, setNodes, onNodesChange] = (0, reactflow_1.useNodesState)(initialNodes);
    const [edges, setEdges, onEdgesChange] = (0, reactflow_1.useEdgesState)(initialEdges);
    // Handle node drag end
    const handleNodeDragStop = (0, react_1.useCallback)((_, node) => {
        const updatedNodes = nodes.map((n) => n.id === node.id
            ? {
                ...n,
                position: node.position,
                data: {
                    ...n.data,
                    position: node.position,
                },
            }
            : n);
        setNodes(updatedNodes);
        onNodesChange?.(updatedNodes.map((n) => n.data));
    }, [nodes, setNodes, onNodesChange]);
    // Handle edge connection
    const handleConnect = (0, react_1.useCallback)((connection) => {
        const newEdge = {
            id: `edge-${connection.source}-${connection.target}`,
            source: connection.source,
            target: connection.target,
            type: 'smoothstep',
            animated: false,
            style: {
                stroke: '#64748b',
                strokeWidth: 2,
            },
            data: {
                id: `edge-${connection.source}-${connection.target}`,
                source: connection.source,
                target: connection.target,
                animated: false,
            },
        };
        setEdges((eds) => {
            const updatedEdges = (0, reactflow_1.addEdge)(newEdge, eds);
            onEdgesChange?.(updatedEdges.map((e) => e.data));
            return updatedEdges;
        });
    }, [setEdges, onEdgesChange]);
    return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", height: "100%", bg: bgColor, borderRadius: "md", overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(reactflow_1.default, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodeDragStop: handleNodeDragStop, onConnect: handleConnect, nodeTypes: nodeTypes, fitView: true, minZoom: 0.1, maxZoom: 2, defaultZoom: 1, snapToGrid: true, snapGrid: [15, 15], nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, proOptions: { hideAttribution: true }, children: [(0, jsx_runtime_1.jsx)(reactflow_1.Background, { color: (0, react_2.useColorModeValue)('#e2e8f0', '#2d3748'), gap: 16, size: 1 }), (0, jsx_runtime_1.jsx)(reactflow_1.Controls, { showInteractive: !readOnly, position: "bottom-right" }), (0, jsx_runtime_1.jsx)(reactflow_1.MiniMap, { nodeColor: nodeBgColor, maskColor: (0, react_2.useColorModeValue)('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)'), style: {
                        backgroundColor: (0, react_2.useColorModeValue)('white', 'gray.800'),
                        borderRadius: 'md',
                    } }), !readOnly && ((0, jsx_runtime_1.jsx)(reactflow_1.Panel, { position: "top-right" }))] }) }));
};
exports.WorkflowCanvas = WorkflowCanvas;
exports.default = exports.WorkflowCanvas;
//# sourceMappingURL=WorkflowCanvas.js.map