"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Notification = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ExclamationRedLargeIcon_1 = require("../../../CommonUI/Icon/ExclamationRedLargeIcon");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const FlowEditContext_1 = require("../../FlowEditContext");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const NotificationDialog = (0, styled_components_1.default)(core_1.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-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-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 140%;
            text-align: center;

            color: #272932;
            padding: 0;
        }
    }
`;
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 ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.NOTIFICATION], control: () => {
            let notification = props.editContext.notification;
            if (!notification)
                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
            let type = notification.type;
            if (!type) {
                type = "error";
            }
            let action = {
                background: UIStyleConstants_1.UIStyleConstants.RED_COLOR,
                color: UIStyleConstants_1.UIStyleConstants.WHITE_COLOR,
            };
            let width = 600;
            if (type === "confirm") {
                action = {
                    background: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                    color: UIStyleConstants_1.UIStyleConstants.WHITE_COLOR,
                };
                width = 400;
            }
            return ((0, jsx_runtime_1.jsxs)(NotificationDialog, { open: true, onClose: onClose, action: action, width: width, children: [type === "error" && ((0, jsx_runtime_1.jsx)(core_1.DialogTitle, { children: (0, jsx_runtime_1.jsx)(ExclamationRedLargeIcon_1.ExclamationRedLargeIcon, {}) })), (0, jsx_runtime_1.jsx)(core_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(core_1.DialogContentText, { "data-testid": `error-dialog-content`, children: notification.message }) }), (notification.onCancel || notification.onSuccess) && ((0, jsx_runtime_1.jsxs)(core_1.DialogActions, { children: [notification.onCancel && ((0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", onClick: onClose, "data-testid": "btn-dialog-cancel", children: "Cancel" })), notification.onSuccess && ((0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", color: "primary", onClick: onSuccess, "data-testid": "btn-dialog-success", children: "Ok" }))] })), notification.actions &&
                        notification.actions.map((a, idx) => ((0, jsx_runtime_1.jsx)(core_1.DialogActions, { style: a.wrapperStyle, children: a.items.map((item, index) => {
                                return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item.renderUI() }, index);
                            }) }, idx)))] }));
        } }));
};
exports.Notification = Notification;
//# sourceMappingURL=XFlowEditor.Notification.js.map