"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIErrorDisplay = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const core_1 = require("@material-ui/core");
const ExclamationRedIcon_1 = require("../Icon/ExclamationRedIcon");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
function UIErrorDisplay(props) {
    if (props.validationBreaks && props.validationBreaks.length !== 0) {
        let validation = [];
        for (let i of props.validationBreaks) {
            if (validation.find((ii) => i.issue === ii.issue)) {
                // its a dup
            }
            else {
                validation.push(i);
            }
        }
        return ((0, jsx_runtime_1.jsx)(material_1.Box, { flexDirection: "column", display: "flex", justifyContent: "flex-start", border: 1, padding: "7px", bgcolor: UIStyleConstants_1.UIStyleConstants.RED_VERY_LIGHT_COLOR, width: "100%", borderRadius: "4px", borderColor: UIStyleConstants_1.UIStyleConstants.RED_COLOR, children: validation.map((v) => {
                return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flexDirection: "row", display: "flex", justifyContent: "flex-start", width: "100%", paddingRight: "5px", paddingLeft: "5px", children: [(0, jsx_runtime_1.jsx)(ExclamationRedIcon_1.ExclamationRedIcon, { style: { paddingRight: 5 } }), (0, jsx_runtime_1.jsx)(core_1.Typography, { children: v.issue })] }, "validation_issue:" + v.issue));
            }) }));
    }
    else {
        return null;
    }
}
exports.UIErrorDisplay = UIErrorDisplay;
//# sourceMappingURL=UIErrorDisplay.js.map