"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValidationInformation = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const ExclamationIcon_1 = require("../../CommonUI/Icon/ExclamationIcon");
const ExclamationRedIcon_1 = require("../../CommonUI/Icon/ExclamationRedIcon");
const WarningRedIcon_1 = require("../../CommonUI/Icon/WarningRedIcon");
const WarningIcon_1 = require("../../CommonUI/Icon/WarningIcon");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const ValidationInformation = ({ provider }) => {
    let issues = provider.getDesignValidationIssues();
    if (issues.length === 0)
        return null;
    let errors = [];
    let warnings = [];
    for (let issue of issues) {
        if (issue.level === IDesignValidationProvider_1.ValidationLevel.ERROR) {
            errors.push(issue);
        }
        else {
            warnings.push(issue);
        }
    }
    return ((0, jsx_runtime_1.jsxs)(Render, { children: [(0, jsx_runtime_1.jsx)(Error, { issues: errors }), (0, jsx_runtime_1.jsx)(Warning, { issues: warnings })] }));
};
exports.ValidationInformation = ValidationInformation;
const Error = ({ issues }) => {
    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
    if (issues.length === 0)
        return null;
    const onOpen = (event) => {
        event.stopPropagation();
        setAnchorEl(event.currentTarget);
    };
    const onClose = () => {
        setAnchorEl(null);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledButton, { type: IDesignValidationProvider_1.ValidationLevel.ERROR, onClick: onOpen, children: [(0, jsx_runtime_1.jsx)(ExclamationIcon_1.ExclamationIcon, { alt: "Error" }), (0, jsx_runtime_1.jsx)("span", { children: issues.length })] }), (0, jsx_runtime_1.jsxs)(StyledMenu, { open: !!anchorEl, onClose: onClose, anchorOrigin: { vertical: "top", horizontal: "left" }, anchorEl: anchorEl, children: [(0, jsx_runtime_1.jsx)(IssueType, { type: IDesignValidationProvider_1.ValidationLevel.ERROR, children: "Errors" }), (0, jsx_runtime_1.jsx)(IssueList, { children: issues.map((issue, idx) => ((0, jsx_runtime_1.jsxs)(IssueListItem, { children: [(0, jsx_runtime_1.jsx)(ExclamationRedIcon_1.ExclamationRedIcon, {}), " ", (0, jsx_runtime_1.jsx)("p", { children: issue.issue })] }, idx))) })] })] }));
};
const Warning = ({ issues }) => {
    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
    if (issues.length === 0)
        return null;
    const onOpen = (event) => {
        event.stopPropagation();
        setAnchorEl(event.currentTarget);
    };
    const onClose = () => {
        setAnchorEl(null);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledButton, { type: IDesignValidationProvider_1.ValidationLevel.WARNING, onClick: onOpen, children: [(0, jsx_runtime_1.jsx)(WarningIcon_1.WarningIcon, { alt: "Error" }), (0, jsx_runtime_1.jsx)("span", { children: issues.length })] }), (0, jsx_runtime_1.jsxs)(StyledMenu, { open: !!anchorEl, onClose: onClose, anchorOrigin: { vertical: "top", horizontal: "left" }, anchorEl: anchorEl, children: [(0, jsx_runtime_1.jsx)(IssueType, { type: IDesignValidationProvider_1.ValidationLevel.WARNING, children: "Warnings" }), (0, jsx_runtime_1.jsx)(IssueList, { children: issues.map((issue, idx) => ((0, jsx_runtime_1.jsxs)(IssueListItem, { children: [(0, jsx_runtime_1.jsx)(WarningRedIcon_1.WarningRedIcon, {}), " ", (0, jsx_runtime_1.jsx)("p", { children: issue.issue })] }, idx))) })] })] }));
};
const Render = styled_components_1.default.div `
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;

    z-index: 999;
`;
const StyledButton = styled_components_1.default.div `
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    width: 60px;
    /* identical to box height, or 20px */

    color: #fff;

    text-align: center;

    background: ${(props) => props.type === IDesignValidationProvider_1.ValidationLevel.ERROR ? UIStyleConstants_1.UIStyleConstants.RED_COLOR : UIStyleConstants_1.UIStyleConstants.ORANGE_COLOR};

    border-radius: 14px;
    height: 28px;
    display: flex;
    align-items: center;

    min-width: 46px;

    cursor: pointer;

    justify-content: space-around;
`;
const StyledMenu = (0, styled_components_1.default)(core_1.Menu) `
    && {
        .MuiMenu-paper {
            border: 1px solid #f1f1f6;
            box-sizing: border-box;
            box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
            border-radius: 8px;
            padding: 16px;
            width: 280px;
        }

        .MuiMenu-list {
            padding: 0;
        }
    }
`;
const IssueList = styled_components_1.default.div `
    max-height: 290px;
    overflow: auto;
`;
const IssueListItem = styled_components_1.default.div `
    display: flex;
    //styleName: text/Inter Regular 12px;

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;
    color: #272932;

    img {
        margin-right: 12px;
    }

    border-bottom: 1px solid rgba(39, 41, 50, 0.05);

    &:last-child {
        border: none;
    }
`;
const IssueType = styled_components_1.default.div `
    //styleName: title/h3 Inter SemiBold 16px;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 4px;

    color: ${(props) => (props.type === IDesignValidationProvider_1.ValidationLevel.ERROR ? UIStyleConstants_1.UIStyleConstants.RED_COLOR : "#F4955F")};
`;
//# sourceMappingURL=ValidationInformation.js.map