"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotificationRendering = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const ExclamationIcon_1 = require("../../CommonUI/Icon/ExclamationIcon");
const ExclamationRedIcon_1 = require("../../CommonUI/Icon/ExclamationRedIcon");
const WarningIcon_1 = require("../../CommonUI/Icon/WarningIcon");
const WarningRedIcon_1 = require("../../CommonUI/Icon/WarningRedIcon");
// eslint-disable-next-line
const InfoButton = (0, styled_components_1.default)(({ type, ...otherProps }) => (0, jsx_runtime_1.jsx)(core_1.Button, { ...otherProps })) `
    &.MuiButtonBase-root {
        background: ${(props) => (props.type === FormDesignConstants_1.NotificationType.ERROR ? "#F65C66" : "#F69D5C")};
        color: #fff;
        border-radius: 20px;
        font-size: 15px;
        line-height: 18px;
        font-weight: 700;
        padding: 10px 15px;

        img {
            margin-right: 12px;
        }

        &:hover {
            background: ${(props) => (props.type === FormDesignConstants_1.NotificationType.ERROR ? "#FFEEED" : "#FEE8DE")};
        }
    }
`;
const NotificationList = styled_components_1.default.div `
    background: #fff;
    border: 1px solid #e6e9ed;
    padding: 0 10px 10px;
`;
const NotificationItem = styled_components_1.default.div `
    background: #e6e9ed;
    padding: 7px 6px;
    color: #01244e;
    font-size: 12px;
    line-height: 15px;

    margin-top: 10px;
    display: flex;
    align-items: center;
    border-radius: 5px;

    img {
        margin-right: 9px;
        width: 12px;
    }
`;
class NotificationRendering extends react_1.default.Component {
    infobuttonRef = react_1.default.createRef();
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
    }
    onClosePopover = () => {
        this.setState({
            open: false,
        });
    };
    onOpenPopover = () => {
        if (this.props.messages.length > 0) {
            this.setState({
                open: true,
            });
        }
    };
    render() {
        const type = this.props.type || FormDesignConstants_1.NotificationType.ERROR;
        let buttonIcon = null;
        let itemIcon = null;
        if (type === FormDesignConstants_1.NotificationType.ERROR) {
            buttonIcon = (0, jsx_runtime_1.jsx)(ExclamationIcon_1.ExclamationIcon, { alt: "Error" });
            itemIcon = (0, jsx_runtime_1.jsx)(ExclamationRedIcon_1.ExclamationRedIcon, { alt: "Error" });
        }
        else if (type === FormDesignConstants_1.NotificationType.WARNING) {
            buttonIcon = (0, jsx_runtime_1.jsx)(WarningIcon_1.WarningIcon, { alt: "Warning" });
            itemIcon = (0, jsx_runtime_1.jsx)(WarningRedIcon_1.WarningRedIcon, { alt: "Warning" });
        }
        return ((0, jsx_runtime_1.jsxs)("div", { ref: this.infobuttonRef, "data-testid": type === FormDesignConstants_1.NotificationType.ERROR ? "error-notification" : "warn-notification", children: [(0, jsx_runtime_1.jsxs)(InfoButton, { type: type, onClick: this.onOpenPopover, "data-testid": `btn-design-${type}-validation`, children: [buttonIcon, " ", this.props.messages.length] }), (0, jsx_runtime_1.jsx)(core_1.Popover, { open: this.state.open, anchorEl: this.infobuttonRef.current, onClose: this.onClosePopover, children: (0, jsx_runtime_1.jsx)(NotificationList, { children: this.props.messages.map((m, idx) => {
                            const message = `${m.elementId} ${m.dataName || ""} ${m.issue}`;
                            return ((0, jsx_runtime_1.jsxs)(NotificationItem, { children: [itemIcon, " ", (0, jsx_runtime_1.jsx)("span", { children: message })] }, idx));
                        }) }) })] }));
    }
}
exports.NotificationRendering = NotificationRendering;
//# sourceMappingURL=NotificationRendering.js.map