"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertNotificationWizardSection = exports.AlertPreview = exports.renderAlertNotificationSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Tabs_1 = require("../../../components/Tabs");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const CheckBox_1 = require("../../../components/CheckBox");
const rebass_1 = require("rebass");
const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
const renderAlertNotificationSummary = () => {
    var _a;
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    if (!((_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification)) {
        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Alert Notification will be displayed");
    }
    return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
};
exports.renderAlertNotificationSummary = renderAlertNotificationSummary;
const AlertPreview = (_a) => {
    var { alertDefinition, api, focusFirstButton } = _a, boxProps = tslib_1.__rest(_a, ["alertDefinition", "api", "focusFirstButton"]);
    const mapButtons = React.useCallback((button) => {
        let buttonStyle = button.ButtonStyle;
        if (buttonStyle && buttonStyle.tone == null && (alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType)) {
            return Object.assign(Object.assign({}, button), { ButtonStyle: Object.assign({ tone: alertDefinition.MessageType.toLowerCase() }, buttonStyle) });
        }
        return button;
    }, [alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType]);
    const alertToPreview = React.useMemo(() => {
        var _a;
        const alertForm = alertDefinition.AlertForm || api.alertApi.internalApi.getDefaultAlertNotificationForm();
        if (typeof alertForm !== 'string') {
            alertForm.Buttons = ((_a = alertForm.Buttons) !== null && _a !== void 0 ? _a : []).map(mapButtons);
        }
        const result = {
            alertType: 'generic',
            header: api.alertApi.internalApi.getAlertMessageHeaderForDataChange(alertDefinition),
            message: api.alertApi.internalApi.getAlertDescriptionForDataChange(alertDefinition),
            alertDefinition: Object.assign(Object.assign({}, alertDefinition), { AlertForm: alertForm }),
        };
        return result;
    }, [alertDefinition]);
    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
        React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
};
exports.AlertPreview = AlertPreview;
const AlertNotificationWizardSection = (props) => {
    var _a, _b, _c, _d;
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const adaptableAlert = {
        alertType: 'generic',
        header: data.MessageType,
        message: '',
        alertDefinition: data,
    };
    if (data.AlertProperties.DisplayNotification && data.AlertForm == undefined) {
        data.AlertForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
            React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(CheckBox_1.CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
                        var _a, _b, _c;
                        const newAlertDefinition = Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), { DisplayNotification }) });
                        if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
                            delete newAlertDefinition.AlertForm.Buttons;
                        }
                        if (DisplayNotification && newAlertDefinition.AlertForm == undefined) {
                            newAlertDefinition.AlertForm =
                                api.alertApi.internalApi.getDefaultAlertNotificationForm();
                        }
                        // make sure we have at least one button
                        if (typeof newAlertDefinition.AlertForm === 'object' && (!((_a = newAlertDefinition.AlertForm) === null || _a === void 0 ? void 0 : _a.Buttons) || ((_c = (_b = newAlertDefinition.AlertForm) === null || _b === void 0 ? void 0 : _b.Buttons) === null || _c === void 0 ? void 0 : _c.length) === 0)) {
                            newAlertDefinition.AlertForm.Buttons = [
                                api.alertApi.internalApi.getDefaultButton()
                            ];
                        }
                        props.onChange(newAlertDefinition);
                    } }, "Display a Notification when Alert is triggered (with action buttons)"),
                ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: (_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                        props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
                    } }))) : null)),
        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
            React.createElement(Tabs_1.Tabs.Tab, null, "Alert Preview"),
            React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
};
exports.AlertNotificationWizardSection = AlertNotificationWizardSection;
