"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertButtonsEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
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 Flex_1 = require("../../../components/Flex");
const sentenceCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/sentenceCase"));
function renderCommand(command) {
    switch (command) {
        case 'highlight-cell':
            return 'Highlight Cell';
        case 'highlight-row':
            return 'Highlight Row';
        case 'jump-to-cell':
            return 'Jump to Cell';
        case 'jump-to-column':
            return 'Jump to Column';
        case 'jump-to-row':
            return 'Jump to Row';
        case 'suspend':
            return 'Suspend';
        case 'undo':
            return 'Undo';
        default:
            return command;
    }
}
const TONE_OPTIONS = [
    {
        label: 'Tone: Use Alert Tone',
        value: 'text',
    },
    ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
        return {
            label: renderTone({ label: StringExtensions_1.default.CapitaliseFirstLetter(tone), value: tone }),
            value: tone,
        };
    }),
];
function renderTone(option) {
    return (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
        React.createElement(SimpleButton_1.default, { className: "twa:mr-2 twa:w-[10px] twa:h-[10px] twa:line-height-0 twa:rounded-[100%] twa:bg-current", tone: option.value, variant: "text" }),
        option.label));
}
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 isRowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
    // except row change
    const hasHighlightCell = props.alertType !== 'RowChange';
    // all, except row removed
    const hasHighlightRow = !isRowRemovedAlert;
    // except row removed
    const hasJumpToCell = props.alertType !== 'RowChange';
    // all
    const hasJumpToRow = !isRowRemovedAlert;
    // all
    const hasSuspend = true;
    // only data change
    const hasUndo = props.alertType === 'DataChange';
    const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
    const buttonCommands = [];
    if (hasHighlightRow) {
        buttonCommands.push('highlight-row');
    }
    if (hasJumpToRow) {
        buttonCommands.push('jump-to-row');
    }
    if (hasHighlightCell) {
        buttonCommands.push('highlight-cell');
    }
    if (hasJumpToCell) {
        buttonCommands.push('jump-to-cell');
    }
    if (hasUndo) {
        buttonCommands.push('undo');
    }
    if (hasSuspend) {
        buttonCommands.push('suspend');
    }
    const commandHandlers = api.optionsApi.getAlertOptions().commandHandlers;
    if (commandHandlers) {
        commandHandlers.forEach((ch) => {
            buttonCommands.push(ch.name);
        });
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa:mb-2" }, "Add Buttons to the Alert Notification, and set Actions to perform when the Button is clicked"),
            React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
                    onChange([
                        ...(AlertButtons || []),
                        {
                            Label: 'OK',
                            ButtonStyle: {
                                variant: 'raised',
                            },
                        },
                    ]);
                } }, "Add")),
        AlertButtons.map((button, index) => {
            let buttonStyle = button.ButtonStyle;
            let buttonLabel = button.Label;
            let btnCommands = [];
            if (button.Command && typeof button.Command === 'string') {
                btnCommands = [button.Command];
            }
            else if (button.Command && Array.isArray(button.Command)) {
                btnCommands = button.Command;
            }
            // filter out the adaptable standard commands
            const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
            const setVariant = (variant) => {
                onChange(AlertButtons.map((btn, i) => {
                    if (i === index) {
                        const buttonStyle = { ...btn.ButtonStyle };
                        buttonStyle.variant = variant;
                        return {
                            ...btn,
                            ButtonStyle: buttonStyle,
                        };
                    }
                    return btn;
                }));
            };
            const setTone = (tone) => {
                onChange(AlertButtons.map((btn, i) => {
                    if (i === index) {
                        const buttonStyle = { ...btn.ButtonStyle };
                        if (tone == null) {
                            delete buttonStyle.tone;
                        }
                        else {
                            buttonStyle.tone = tone;
                        }
                        return {
                            ...btn,
                            ButtonStyle: buttonStyle,
                        };
                    }
                    return btn;
                }));
            };
            const handleCommandChange = (checked, commandName) => {
                let commands = btnCommands;
                if (!checked) {
                    // remove current Command
                    commands = commands.filter((a) => a !== commandName);
                }
                else {
                    commands = [...commands, commandName];
                }
                onChange(AlertButtons.map((btn, i) => {
                    if (i === index) {
                        return {
                            ...btn,
                            Command: commands.length ? commands : 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 ? button?.icon?.name : '', onChange: (iconName) => {
                        onChange(AlertButtons.map((btn) => {
                            if (btn === button) {
                                return {
                                    ...btn,
                                    icon: {
                                        name: iconName,
                                    },
                                };
                            }
                            return btn;
                        }));
                    } }));
            }
            return (React.createElement(Flex_1.Box, { key: index, className: "twa:ml-3", style: {
                    borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
                } },
                React.createElement(FormLayout_1.default, { className: "twa:mb-2 twa:pt-2" },
                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(Flex_1.Box, { className: "twa:text-2 twa:whitespace-nowrap" }, "Button Text") },
                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
                            React.createElement(Input_1.default, { value: buttonLabel, className: "twa:mr-2 twa:w-[80px]", onChange: (e) => {
                                    onChange(AlertButtons.map((btn, i) => {
                                        if (i === index) {
                                            return { ...btn, Label: e.target.value };
                                        }
                                        return btn;
                                    }));
                                } }),
                            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?.variant, onChange: (value) => {
                                    setVariant(value);
                                } }),
                            React.createElement(Select_1.Select, { className: "twa:ml-2", options: TONE_OPTIONS, onChange: (value) => {
                                    if (value === 'text') {
                                        setTone(null);
                                        return;
                                    }
                                    setTone(value);
                                }, value: buttonStyle?.tone ?? 'text' }),
                            React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, className: "twa:ml-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(Flex_1.Box, { className: "twa:text-2" }, "Actions") },
                        buttonCommands.map((commandName) => {
                            return (React.createElement(CheckBox_1.CheckBox, { key: commandName, className: "twa:mr-3", onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
                                    (Array.isArray(button.Command) && button.Command.includes(commandName)) },
                                React.createElement(Flex_1.Box, { className: "twa:text-2" }, (0, sentenceCase_1.default)(commandName))));
                        }),
                        btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
                            React.createElement(Flex_1.Box, { className: "twa:text-2" },
                                "User function",
                                btnUserFunctions.length > 1 ? 's' : '',
                                ":",
                                ' ',
                                btnUserFunctions.join(', ')))) : null),
                    iconSelector && (React.createElement(FormLayout_1.FormRow, { label: React.createElement(Flex_1.Box, { className: "twa:text-2" }, "Icon") },
                        React.createElement(Flex_1.Box, null, iconSelector))))));
        })));
};
exports.AlertButtonsEditor = AlertButtonsEditor;
