"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValidationDisplay = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Validation Display Component
 * Shows workflow validation errors and warnings in a user-friendly format
 */
const react_1 = __importDefault(require("react"));
const react_2 = require("@chakra-ui/react");
const fi_1 = require("react-icons/fi");
const workflowValidation_1 = require("../../utils/workflowValidation");
// Error code to icon mapping
const ERROR_ICONS = {
    [workflowValidation_1.ValidationErrorCodes.CYCLIC_DEPENDENCY]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.DISCONNECTED_NODE]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_EDGE]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.MULTIPLE_START_NODES]: fi_1.FiAlertTriangle,
    [workflowValidation_1.ValidationErrorCodes.NO_START_NODE]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.NO_END_NODE]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_NODE_TYPE]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.MISSING_REQUIRED_CONFIG]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_CONFIG_VALUE]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.DUPLICATE_NODE_ID]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_SECURITY_POLICY]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_AUTH_CONFIG]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_IP_WHITELIST]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INSECURE_CONNECTION]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_APPROVAL_CONFIG]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_TIMEOUT]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_APPROVER]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_STATUS]: fi_1.FiAlertCircle,
    [workflowValidation_1.ValidationErrorCodes.INVALID_VERSION]: fi_1.FiAlertCircle,
};
// Error code to color scheme mapping
const ERROR_COLORS = {
    [workflowValidation_1.ValidationErrorCodes.CYCLIC_DEPENDENCY]: 'red',
    [workflowValidation_1.ValidationErrorCodes.DISCONNECTED_NODE]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_EDGE]: 'red',
    [workflowValidation_1.ValidationErrorCodes.MULTIPLE_START_NODES]: 'orange',
    [workflowValidation_1.ValidationErrorCodes.NO_START_NODE]: 'red',
    [workflowValidation_1.ValidationErrorCodes.NO_END_NODE]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_NODE_TYPE]: 'red',
    [workflowValidation_1.ValidationErrorCodes.MISSING_REQUIRED_CONFIG]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_CONFIG_VALUE]: 'red',
    [workflowValidation_1.ValidationErrorCodes.DUPLICATE_NODE_ID]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_SECURITY_POLICY]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_AUTH_CONFIG]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_IP_WHITELIST]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INSECURE_CONNECTION]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_APPROVAL_CONFIG]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_TIMEOUT]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_APPROVER]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_STATUS]: 'red',
    [workflowValidation_1.ValidationErrorCodes.INVALID_VERSION]: 'red',
};
const ValidationDisplay = ({ result, onNodeClick, onErrorClick, maxHeight = '400px', }) => {
    const { isOpen, onToggle } = (0, react_2.useDisclosure)({ defaultIsOpen: true });
    const { errors, warnings } = result;
    // Group errors by node ID for better organization
    const errorsByNode = react_1.default.useMemo(() => {
        const grouped = {};
        [...errors, ...warnings].forEach(error => {
            if (error.nodeId) {
                if (!grouped[error.nodeId]) {
                    grouped[error.nodeId] = [];
                }
                grouped[error.nodeId].push(error);
            }
        });
        return grouped;
    }, [errors, warnings]);
    // Get standalone errors (not associated with a node)
    const standaloneErrors = react_1.default.useMemo(() => {
        return [...errors, ...warnings].filter(error => !error.nodeId);
    }, [errors, warnings]);
    const renderError = (error) => {
        const IconComponent = ERROR_ICONS[error.code] || fi_1.FiAlertCircle;
        const colorScheme = ERROR_COLORS[error.code] || 'red';
        const isWarning = error.severity === 'warning';
        return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, p: 2, borderRadius: "md", bg: isWarning ? 'orange.50' : 'red.50', _hover: { bg: isWarning ? 'orange.100' : 'red.100' }, cursor: onErrorClick ? 'pointer' : 'default', onClick: () => onErrorClick?.(error), children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: IconComponent, color: isWarning ? 'orange.500' : 'red.500', boxSize: 4 }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", children: error.message }), error.nodeId && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: colorScheme, variant: "subtle", cursor: onNodeClick ? 'pointer' : 'default', onClick: (e) => {
                                        e.stopPropagation();
                                        onNodeClick?.(error.nodeId);
                                    }, children: ["Node: ", error.nodeId] }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: isWarning ? 'orange' : 'red', variant: "subtle", children: error.severity })] }))] })] }, `${error.code}-${error.nodeId || 'standalone'}`));
    };
    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: 1, borderRadius: "lg", overflow: "hidden", bg: "white", boxShadow: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { w: "full", variant: "ghost", onClick: onToggle, justifyContent: "space-between", px: 4, py: 2, _hover: { bg: 'gray.50' }, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: isOpen ? fi_1.FiChevronUp : fi_1.FiChevronDown, color: "gray.500", boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", children: "Validation Results" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [errors.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "red", variant: "solid", children: [errors.length, " Error", errors.length === 1 ? '' : 's'] })), warnings.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "orange", variant: "solid", children: [warnings.length, " Warning", warnings.length === 1 ? '' : 's'] }))] })] }) }), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isOpen, children: (0, jsx_runtime_1.jsx)(react_2.Box, { maxH: maxHeight, overflowY: "auto", p: 4, borderTopWidth: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 3, align: "stretch", children: [standaloneErrors.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", children: "Workflow Issues" }), standaloneErrors.map(renderError)] })), Object.entries(errorsByNode).map(([nodeId, nodeErrors]) => ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", cursor: onNodeClick ? 'pointer' : 'default', onClick: () => onNodeClick?.(nodeId), children: ["Node: ", nodeId] }), nodeErrors.map(renderError)] }, nodeId))), errors.length === 0 && warnings.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { p: 4, bg: "green.50", borderRadius: "md", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiAlertCircle, color: "green.500", boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: "green.700", fontWeight: "medium", children: "No validation issues found" })] }))] }) }) })] }));
};
exports.ValidationDisplay = ValidationDisplay;
//# sourceMappingURL=ValidationDisplay.js.map