"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WorkflowNode = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Workflow Node Component
 * Represents a node in the workflow canvas
 */
const react_1 = require("react");
const react_2 = require("@chakra-ui/react");
const reactflow_1 = require("reactflow");
const icons_1 = require("@chakra-ui/icons");
const NODE_TYPES = {
    agent: {
        icon: icons_1.ChatIcon,
        color: 'blue',
        label: 'Agent',
    },
    condition: {
        icon: icons_1.RepeatIcon,
        color: 'purple',
        label: 'Condition',
    },
    action: {
        icon: icons_1.SettingsIcon,
        color: 'green',
        label: 'Action',
    },
    delay: {
        icon: icons_1.TimeIcon,
        color: 'orange',
        label: 'Delay',
    },
    error: {
        icon: icons_1.WarningIcon,
        color: 'red',
        label: 'Error Handler',
    },
};
exports.WorkflowNode = (0, react_1.memo)(({ data, isSelected, onSelect, }) => {
    const bgColor = (0, react_2.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_2.useColorModeValue)('gray.200', 'gray.700');
    const selectedBorderColor = (0, react_2.useColorModeValue)('blue.500', 'blue.300');
    const nodeType = NODE_TYPES[data.type] || NODE_TYPES.action;
    const IconComponent = nodeType.icon;
    const handleClick = () => {
        onSelect?.(data);
    };
    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: data.description || nodeType.label, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: bgColor, borderWidth: "2px", borderColor: isSelected ? selectedBorderColor : borderColor, borderRadius: "md", p: 3, minWidth: "200px", cursor: "pointer", onClick: handleClick, _hover: {
                borderColor: selectedBorderColor,
                transform: 'translateY(-1px)',
                boxShadow: 'md',
            }, transition: "all 0.2s", children: [(0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "target", position: reactflow_1.Position.Top, style: {
                        background: nodeType.color,
                        width: '8px',
                        height: '8px',
                    } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: IconComponent, color: `${nodeType.color}.500`, boxSize: 5 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: "gray.700", noOfLines: 1, children: data.label || 'Unnamed Node' })] }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: nodeType.color, variant: "subtle", fontSize: "xs", px: 2, py: 0.5, borderRadius: "full", children: nodeType.label }), data.status && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: data.status === 'active' ? 'green' : 'gray', variant: "subtle", fontSize: "xs", px: 2, py: 0.5, borderRadius: "full", ml: 2, children: data.status })), (0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Bottom, style: {
                        background: nodeType.color,
                        width: '8px',
                        height: '8px',
                    } })] }) }));
});
exports.WorkflowNode.displayName = 'WorkflowNode';
exports.default = exports.WorkflowNode;
//# sourceMappingURL=WorkflowNode.js.map