import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Button, Popover } from "@material-ui/core";
import { NotificationType } from "../FormDesignConstants";
import { ExclamationIcon } from "../../CommonUI/Icon/ExclamationIcon";
import { ExclamationRedIcon } from "../../CommonUI/Icon/ExclamationRedIcon";
import { WarningIcon } from "../../CommonUI/Icon/WarningIcon";
import { WarningRedIcon } from "../../CommonUI/Icon/WarningRedIcon";
// @ts-ignore
const InfoButton = styled((_a) => {
    var { type } = _a, otherProps = __rest(_a, ["type"]);
    return _jsx(Button, Object.assign({}, otherProps), void 0);
}) `
    &.MuiButtonBase-root {
        background: ${(props) => (props.type === 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 === NotificationType.ERROR ? "#FFEEED" : "#FEE8DE")};
        }
    }
`;
const NotificationList = styled.div `
    background: #fff;
    border: 1px solid #e6e9ed;
    padding: 0 10px 10px;
`;
const NotificationItem = styled.div `
    background: #e6e9ed;
    padding: 7px 6px;
    color: #01244e;
    font-size: 12px;
    line-height: 15px;
    font-family: Mulish;
    margin-top: 10px;
    display: flex;
    align-items: center;
    border-radius: 5px;

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