"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertButtonsEditor = void 0;
const tslib_1 = require("tslib");
const rebass_1 = require("rebass");
const React = tslib_1.__importStar(require("react"));
const sentence_case_1 = require("sentence-case");
const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const CheckBox_1 = require("../../../components/CheckBox");
const Helper_1 = require("../../../Utilities/Helpers/Helper");
const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
const Select_1 = require("../../../components/Select");
const AlertButtonsEditor = (props) => {
    const { api, adaptableAlert } = props;
    const onChange = (newButtons) => {
        props.onChange(newButtons);
    };
    const alertDefinition = adaptableAlert.alertDefinition;
    const rowAddedAlert = api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
    const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
    // except row change
    const hasHighlightCell = props.alertType !== 'RowChange';
    // all, except row removed
    const hasHighlightRow = !rowRemovedAlert;
    // except row removed
    const hasJumpToCell = props.alertType !== 'RowChange';
    // all
    const hasJumpToRow = !rowRemovedAlert;
    // all
    const hasSuspend = true;
    // only data change
    const hasUndo = props.alertType === 'DataChange';
    const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
    const buttonActions = [];
    if (hasHighlightRow) {
        buttonActions.push('highlight-row');
    }
    if (hasJumpToRow) {
        buttonActions.push('jump-to-row');
    }
    if (hasHighlightCell) {
        buttonActions.push('highlight-cell');
    }
    if (hasJumpToCell) {
        buttonActions.push('jump-to-cell');
    }
    if (hasUndo) {
        buttonActions.push('undo');
    }
    if (hasSuspend) {
        buttonActions.push('suspend');
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
            React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert Notification, and set Actions to perform when button is clicked"),
            React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
                    onChange([
                        ...(AlertButtons || []),
                        {
                            Label: 'OK',
                            ButtonStyle: {
                                variant: 'raised',
                            },
                        },
                    ]);
                } }, "Add")),
        AlertButtons.map((button, index) => {
            var _a, _b;
            let buttonStyle = button.ButtonStyle;
            let buttonLabel = button.Label;
            let btnActions = [];
            if (button.Action && typeof button.Action === 'string') {
                btnActions = [button.Action];
            }
            else if (button.Action && Array.isArray(button.Action)) {
                btnActions = button.Action;
            }
            // filter out the adaptable standard actions
            const btnUserFunctions = btnActions.filter((action) => !buttonActions.includes(action));
            const setVariant = (variant) => {
                onChange(AlertButtons.map((btn, i) => {
                    if (i === index) {
                        const buttonStyle = Object.assign({}, btn.ButtonStyle);
                        buttonStyle.variant = variant;
                        return Object.assign(Object.assign({}, btn), { ButtonStyle: buttonStyle });
                    }
                    return btn;
                }));
            };
            const setTone = (tone) => {
                onChange(AlertButtons.map((btn, i) => {
                    if (i === index) {
                        const buttonStyle = Object.assign({}, btn.ButtonStyle);
                        if (tone == null) {
                            delete buttonStyle.tone;
                        }
                        else {
                            buttonStyle.tone = tone;
                        }
                        return Object.assign(Object.assign({}, btn), { ButtonStyle: buttonStyle });
                    }
                    return btn;
                }));
            };
            const handleActionChange = (checked, actionName) => {
                let actions = btnActions;
                if (!checked) {
                    // remove current action
                    actions = actions.filter((a) => a !== actionName);
                }
                else {
                    actions = [...actions, actionName];
                }
                onChange(AlertButtons.map((btn, i) => {
                    if (i === index) {
                        return Object.assign(Object.assign({}, btn), { Action: actions.length ? actions : undefined });
                    }
                    return btn;
                }));
            };
            let iconSelector = null;
            if (!button.icon || (button.icon && 'name' in button.icon)) {
                iconSelector = (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? (_a = button === null || button === void 0 ? void 0 : button.icon) === null || _a === void 0 ? void 0 : _a.name : '', onChange: (iconName) => {
                        onChange(AlertButtons.map((btn) => {
                            if (btn === button) {
                                return Object.assign(Object.assign({}, btn), { icon: {
                                        name: iconName,
                                    } });
                            }
                            return btn;
                        }));
                    } }));
            }
            return (React.createElement(rebass_1.Box, { key: index, marginLeft: 3, style: {
                    borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
                } },
                React.createElement(FormLayout_1.default, { marginBottom: 2, paddingTop: 2 },
                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
                            React.createElement(Input_1.default, { value: buttonLabel, mr: 2, style: { width: 80 }, onChange: (e) => {
                                    onChange(AlertButtons.map((btn, i) => {
                                        if (i === index) {
                                            return Object.assign(Object.assign({}, btn), { Label: e.target.value });
                                        }
                                        return btn;
                                    }));
                                } }),
                            React.createElement(rebass_1.Box, { mr: 2 },
                                React.createElement(Select_1.Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
                                        return {
                                            label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
                                            value: variant,
                                        };
                                    }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
                                        setVariant(value);
                                    } })),
                            React.createElement(Select_1.Select, { options: [
                                    {
                                        label: 'Tone: Use Alert Tone',
                                        value: 'text',
                                    },
                                    ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
                                        return {
                                            label: StringExtensions_1.default.CapitaliseFirstLetter(tone),
                                            value: tone,
                                        };
                                    }),
                                ], renderSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
                                    if (value === 'text') {
                                        setTone(null);
                                    }
                                    setTone(value);
                                }, value: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'text' }),
                            React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
                                    onChange(AlertButtons.filter((btn) => btn !== button));
                                } }))),
                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Actions") },
                        buttonActions.map((actionName) => {
                            return (React.createElement(CheckBox_1.CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => handleActionChange(checked, actionName), checked: button.Action === actionName ||
                                    (Array.isArray(button.Action) && button.Action.includes(actionName)) },
                                React.createElement(rebass_1.Text, { fontSize: 2 }, (0, sentence_case_1.sentenceCase)(actionName))));
                        }),
                        btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
                            React.createElement(rebass_1.Text, { fontSize: 2 },
                                "User function",
                                btnUserFunctions.length > 1 ? 's' : '',
                                ":",
                                ' ',
                                btnUserFunctions.join(', ')))) : null),
                    iconSelector && (React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Icon") },
                        React.createElement(rebass_1.Box, null, iconSelector))))));
        })));
};
exports.AlertButtonsEditor = AlertButtonsEditor;
