import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core";
import React from "react";
import styled from "styled-components";
import { ExclamationRedLargeIcon } from "../../CommonUI/Icon/ExclamationRedLargeIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
const NotificationDialog = styled(Dialog) `
    .MuiDialogTitle-root {
        padding: 28px 24px 0;
        .MuiTypography-root {
            text-align: center;
            padding: 0;
        }
    }

    .MuiDialogActions-root {
        justify-content: center;
        padding: 0;

        .MuiButton-root {
            padding: 10px 33px;
            .MuiButton-label {
                font-family: Inter;
                font-style: normal;
                font-weight: bold;
                font-size: 14px;
                line-height: 140%;
                /* identical to box height, or 20px */
            }
        }

        .MuiButton-containedPrimary {
            background: ${(props) => props.action.background};
            border-radius: 4px;
            color: ${(props) => props.action.color};
        }
    }

    .MuiDialog-paper {
        padding: 32px;

        max-width: ${(props) => props.width || 600}px;
    }

    .MuiDialogContent-root {
        padding: 0 !important;

        .MuiDialogContentText-root {
            font-family: Inter;
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 140%;
            text-align: center;

            color: #272932;
            padding: 0;
        }
    }
`;
export const Notification = (props) => {
    function onClose() {
        if (props.editContext.notification.onCancel) {
            props.editContext.notification.onCancel();
        }
        props.editContext.notification = undefined;
    }
    function onSuccess() {
        if (props.editContext.notification.onSuccess) {
            props.editContext.notification.onSuccess();
        }
        props.editContext.notification = undefined;
    }
    return (_jsx(ObserveState, { listenTo: props.editContext, properties: ["notification"], control: () => {
            let notification = props.editContext.notification;
            if (!notification)
                return _jsx(_Fragment, {}, void 0);
            let type = notification.type;
            if (!type) {
                type = "error";
            }
            let action = {
                background: "#EE3E54",
                color: "#fff",
            };
            let width = 600;
            if (type === "confirm") {
                action = {
                    background: "#4050A6",
                    color: "#fff",
                };
                width = 400;
            }
            return (_jsxs(NotificationDialog, Object.assign({ open: true, onClose: onClose, action: action, width: width }, { children: [type === "error" && (_jsx(DialogTitle, { children: _jsx(ExclamationRedLargeIcon, {}, void 0) }, void 0)),
                    _jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ "data-testid": `error-dialog-content` }, { children: notification.message }), void 0) }, void 0),
                    (notification.onCancel || notification.onSuccess) && (_jsxs(DialogActions, { children: [notification.onCancel && (_jsx(Button, Object.assign({ variant: "contained", onClick: onClose, "data-testid": "btn-dialog-cancel" }, { children: "Cancel" }), void 0)),
                            notification.onSuccess && (_jsx(Button, Object.assign({ variant: "contained", color: "primary", onClick: onSuccess, "data-testid": "btn-dialog-success" }, { children: "Ok" }), void 0))] }, void 0)),
                    notification.actions &&
                        notification.actions.map((a, idx) => (_jsx(DialogActions, Object.assign({ style: a.wrapperStyle }, { children: a.items.map((item, index) => {
                                return _jsx(React.Fragment, { children: item.renderUI() }, index);
                            }) }), idx)))] }), void 0));
        } }, void 0));
};
//# sourceMappingURL=Notification.js.map