import * as React from 'react';
import { Tabs } from '../../../components/Tabs';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CheckBox } from '../../../components/CheckBox';
import { Box, Text } from 'rebass';
import { AdaptablePopupAlert } from '../../Components/Popups/AdaptablePopupAlert';
import { AlertButtonsEditor } from './AlertButtonsEditor';
import join from '../../../components/utils/join';
export const renderAlertNotificationSummary = () => {
    const { data, api } = useOnePageAdaptableWizardContext();
    if (!data.AlertProperties?.DisplayNotification) {
        return React.createElement(Text, { fontSize: 2 }, "No Alert Notification will be displayed");
    }
    return React.createElement(AlertPreview, { api: api, alertDefinition: data });
};
export const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) => {
    const mapButtons = React.useCallback((button) => {
        let buttonStyle = button.ButtonStyle;
        if (buttonStyle && buttonStyle.tone == null && alertDefinition?.MessageType) {
            return {
                ...button,
                ButtonStyle: {
                    tone: alertDefinition.MessageType.toLowerCase(),
                    ...buttonStyle,
                },
            };
        }
        return button;
    }, [alertDefinition?.MessageType]);
    const alertToPreview = React.useMemo(() => {
        const alertForm = alertDefinition.AlertForm || api.alertApi.internalApi.getDefaultAlertNotificationForm();
        if (typeof alertForm !== 'string') {
            alertForm.Buttons = (alertForm.Buttons ?? []).map(mapButtons);
        }
        const result = {
            alertType: 'generic',
            header: api.alertApi.internalApi.getAlertMessageHeaderForDataChange(alertDefinition),
            message: api.alertApi.internalApi.getAlertDescriptionForDataChange(alertDefinition),
            alertDefinition: {
                ...alertDefinition,
                AlertForm: alertForm,
            },
        };
        return result;
    }, [alertDefinition]);
    return (React.createElement(Box, { ...boxProps, className: join(boxProps.className, 'ab-AlertPreview'), style: {
            border: '1px solid var(--ab-color-inputborder)',
            ...boxProps.style,
        } },
        React.createElement(AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
};
export const AlertNotificationWizardSection = (props) => {
    const { data, api } = 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, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
            React.createElement(Tabs.Tab, null, "Notification Options"),
            React.createElement(Tabs.Content, null,
                React.createElement("div", null,
                    React.createElement(CheckBox, { checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
                            const newAlertDefinition = {
                                ...data,
                                AlertProperties: {
                                    ...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' &&
                                (!newAlertDefinition.AlertForm?.Buttons ||
                                    newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
                                newAlertDefinition.AlertForm.Buttons = [
                                    api.alertApi.internalApi.getDefaultButton(),
                                ];
                            }
                            props.onChange(newAlertDefinition);
                        } }, "Display a Notification when Alert is triggered (with action buttons)")),
                data.AlertProperties?.DisplayNotification ? (typeof data.AlertForm === 'string' ? (React.createElement(Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                        props.onChange({
                            ...data,
                            AlertForm: {
                                ...data.AlertForm,
                                Buttons: buttons,
                            },
                        });
                    } }))) : null)),
        data.AlertProperties?.DisplayNotification ? (React.createElement(Tabs, { "data-name": "alert-preview", autoFocus: false },
            React.createElement(Tabs.Tab, null, "Alert Preview"),
            React.createElement(Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(AlertPreview, { alertDefinition: data, api: api }))))) : null));
};
