"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptablePopupAlert = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PanelWithImage_1 = require("../Panels/PanelWithImage");
const UIHelper_1 = require("../../UIHelper");
const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
const react_1 = require("react");
const AdaptableContext_1 = require("../../AdaptableContext");
const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
const Flex_1 = require("../../../components/Flex");
const AdaptablePopupAlert = (props) => {
    const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';
    const msg = props.adaptableAlert.message ?? '';
    const headerColor = UIHelper_1.UIHelper.getColorByMessageType(messageType);
    let header = messageType;
    const { api, adaptableOptions } = (0, AdaptableContext_1.useAdaptable)();
    if (props.adaptableAlert.header) {
        header = `${header}: ${props.adaptableAlert.header}`;
    }
    let glyph = UIHelper_1.UIHelper.getGlyphByMessageType(messageType);
    // we still need the defauld
    const defaultForm = React.useMemo(() => {
        return api.alertApi.internalApi.getDefaultAlertNotificationForm();
    }, []);
    const [formData, setFormData] = (0, react_1.useState)({});
    const context = React.useMemo(() => {
        return {
            alert: props.adaptableAlert,
            ...api.internalApi.buildBaseContext(),
            formData: formData,
        };
    }, [JSON.stringify(formData), props.adaptableAlert]);
    const adaptableForm = React.useMemo(() => {
        if (api.isDestroyed()) {
            return null;
        }
        return api.alertApi.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
    }, [props.adaptableAlert.alertDefinition.AlertForm, defaultForm, messageType, context]);
    const renderApplicationIcon = (icon) => {
        if (!icon) {
            return null;
        }
        return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:self-end", alignItems: "end" },
            React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
    };
    const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' } },
        React.createElement("div", null,
            React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
                renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
                    adaptableOptions.userInterfaceOptions.applicationIcon),
                typeof msg === 'string'
                    ? msg.split('\n').map(function (item, index) {
                        return (React.createElement(Flex_1.Flex, { flexDirection: "row", key: index },
                            React.createElement(Flex_1.Box, { key: index, className: "twa:m-2" },
                                item,
                                React.createElement("br", null))));
                    })
                    : msg),
            React.createElement(Flex_1.Box, { className: "twa:m-2" }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
                    props.onClose();
                    // we want to give the current popup time to close
                    // and we reopen with a delay in case this button action causes another popup
                    setTimeout(() => {
                        button.onClick?.(button, context);
                    }, 20);
                } })) : null))));
    return props.headless ? (content) : (React.createElement(Dialog_1.default, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, className: "twa:min-h-auto twa:min-w-[20vw] twa:max-w-[70vw]" }, content));
};
exports.AdaptablePopupAlert = AdaptablePopupAlert;
