import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import styled from "styled-components";
import { Menu } from "@material-ui/core";
import { ValidationLevel } from "../../Common/IDesignValidationProvider";
import { ExclamationIcon } from "../../CommonUI/Icon/ExclamationIcon";
import { ExclamationRedIcon } from "../../CommonUI/Icon/ExclamationRedIcon";
import { WarningRedIcon } from "../../CommonUI/Icon/WarningRedIcon";
import { WarningIcon } from "../../CommonUI/Icon/WarningIcon";
export 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 === ValidationLevel.ERROR) {
            errors.push(issue);
        }
        else {
            warnings.push(issue);
        }
    }
    return (_jsxs(Render, { children: [_jsx(Error, { issues: errors }, void 0),
            _jsx(Warning, { issues: warnings }, void 0)] }, void 0));
};
const Error = ({ issues }) => {
    const [anchorEl, setAnchorEl] = useState(null);
    if (issues.length === 0)
        return null;
    const onOpen = (event) => {
        event.stopPropagation();
        setAnchorEl(event.currentTarget);
    };
    const onClose = () => {
        setAnchorEl(null);
    };
    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, Object.assign({ type: ValidationLevel.ERROR, onClick: onOpen }, { children: [_jsx(ExclamationIcon, { alt: "Error" }, void 0),
                    _jsx("span", { children: issues.length }, void 0)] }), void 0),
            _jsxs(StyledMenu, Object.assign({ open: !!anchorEl, onClose: onClose, anchorOrigin: { vertical: "top", horizontal: "left" }, anchorEl: anchorEl }, { children: [_jsx(IssueType, Object.assign({ type: ValidationLevel.ERROR }, { children: "Errors" }), void 0),
                    _jsx(IssueList, { children: issues.map((issue, idx) => (_jsxs(IssueListItem, { children: [_jsx(ExclamationRedIcon, {}, void 0), " ", _jsx("p", { children: issue.issue }, void 0)] }, idx))) }, void 0)] }), void 0)] }, void 0));
};
const Warning = ({ issues }) => {
    const [anchorEl, setAnchorEl] = useState(null);
    if (issues.length === 0)
        return null;
    const onOpen = (event) => {
        event.stopPropagation();
        setAnchorEl(event.currentTarget);
    };
    const onClose = () => {
        setAnchorEl(null);
    };
    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, Object.assign({ type: ValidationLevel.WARNING, onClick: onOpen }, { children: [_jsx(WarningIcon, { alt: "Error" }, void 0),
                    _jsx("span", { children: issues.length }, void 0)] }), void 0),
            _jsxs(StyledMenu, Object.assign({ open: !!anchorEl, onClose: onClose, anchorOrigin: { vertical: "top", horizontal: "left" }, anchorEl: anchorEl }, { children: [_jsx(IssueType, Object.assign({ type: ValidationLevel.WARNING }, { children: "Warnings" }), void 0),
                    _jsx(IssueList, { children: issues.map((issue, idx) => (_jsxs(IssueListItem, { children: [_jsx(WarningRedIcon, {}, void 0), " ", _jsx("p", { children: issue.issue }, void 0)] }, idx))) }, void 0)] }), void 0)] }, void 0));
};
const Render = styled.div `
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;

    z-index: 999;
`;
const StyledButton = styled.div `
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */

    color: #fff;

    text-align: center;

    background: ${(props) => (props.type === ValidationLevel.ERROR ? "#EE3E54" : "#F4955F")};

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

    min-width: 46px;

    cursor: pointer;

    justify-content: space-around;
`;
const StyledMenu = styled(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.div `
    max-height: 290px;
    overflow: auto;
`;
const IssueListItem = styled.div `
    display: flex;
    //styleName: text/Inter Regular 12px;
    font-family: Inter;
    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.div `
    //styleName: title/h3 Inter SemiBold 16px;
    font-family: Inter;
    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 === ValidationLevel.ERROR ? "#ee3e54" : "#F4955F")};
`;
//# sourceMappingURL=ValidationInformation.js.map