"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = exports.renderAlertBehaviourWizardSummary = 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 CodeBlock_1 = require("../../../components/CodeBlock");
const rebass_1 = require("rebass");
const ValueSelector_1 = require("../../Components/ValueSelector");
const StyleComponent_1 = require("../../Components/StyleComponent");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const AdaptableContext_1 = require("../../AdaptableContext");
const StylePreview_1 = require("../../../components/StylePreview");
const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
const Select_1 = require("../../../components/Select");
const HighlightStyle = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const options = [
        {
            label: 'Use Message Type',
            onClick: () => {
                props.onChange(true);
            },
        },
        {
            label: 'Custom Style',
            onClick: () => {
                const initialStyle = ObjectFactory_1.default.CreateEmptyStyle();
                props.onChange(initialStyle);
            },
        },
    ];
    const options2 = [
        {
            label: 'Use Message Type',
            value: 'system',
        },
        {
            label: 'Custom Style',
            value: 'custom',
        },
    ];
    return (React.createElement(rebass_1.Box, { "data-name": props.dataName },
        React.createElement(rebass_1.Flex, null,
            React.createElement(CheckBox_1.CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
                    props.onChange(checked);
                } }, props.label),
            Boolean(props.highlight) && (React.createElement(Select_1.Select, { options: options2, value: typeof props.highlight === 'boolean' ? 'system' : 'custom', onChange: (value) => {
                    if (value === 'system') {
                        props.onChange(true);
                    }
                    else {
                        const initialStyle = ObjectFactory_1.default.CreateEmptyStyle();
                        props.onChange(initialStyle);
                    }
                } }))),
        typeof props.highlight === 'object' && (React.createElement(Panel_1.default, { margin: 2 },
            React.createElement(rebass_1.Box, { paddingLeft: 3 },
                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {
                        props.onChange(style);
                    } }))))));
};
const renderAlertBehaviourWizardSummary = (alertDefinition) => {
    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    return (0, exports.renderAlertBehaviourSummary)(alertDefinition, api);
};
exports.renderAlertBehaviourWizardSummary = renderAlertBehaviourWizardSummary;
const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
    const { AlertProperties = {} } = alert;
    const values = [
        AlertProperties.PreventEdit ? { label: 'Prevent Cell Edit', id: 'preventCellEdit' } : null,
        AlertProperties.HighlightCell ? { label: 'Highlight Cell', id: 'highlightCell' } : null,
        AlertProperties.HighlightRow ? { label: 'Highlight Row', id: 'highlightRow' } : null,
        AlertProperties.JumpToCell ? { label: 'Jump To Cell', id: 'jumptocell' } : null,
        AlertProperties.JumpToRow ? { label: 'Jump To Row', id: 'jumptorow' } : null,
        AlertProperties.ShowInDiv
            ? {
                label: (React.createElement(React.Fragment, null,
                    "Show in ",
                    React.createElement(CodeBlock_1.CodeBlock, { ml: 1, p: 0 }, `<div />`))),
                id: 'showInDiv',
            }
            : null,
        AlertProperties.LogToConsole ? { label: 'Log To Console', id: 'logtoconsole' } : null,
    ].filter(Boolean);
    if (!values.length) {
        values.push({
            label: 'No ' + api.internalApi.getCorrectEnglishVariant('Behaviour') + ' Selected',
            id: 'none',
        });
    }
    return (React.createElement(ValueSelector_1.ValueOptionsTags, { allowWrap: allowWrap, options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => {
            if (x.id === 'highlightCell' && typeof AlertProperties.HighlightCell === 'object') {
                return (React.createElement(StylePreview_1.StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightCell }, "Highlight Cell"));
            }
            if (x.id === 'highlightRow' && typeof AlertProperties.HighlightRow === 'object') {
                return (React.createElement(StylePreview_1.StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightRow }, "Highlight Row"));
            }
            return React.createElement(React.Fragment, null, x.label);
        } }));
};
exports.renderAlertBehaviourSummary = renderAlertBehaviourSummary;
const AlertBehaviourWizardSection = (props) => {
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const { AlertProperties = {} } = data;
    const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
    // data change only
    const hasPreventCellEdit = props.alertType === 'Validation';
    // except row change
    const hasHighlightCell = props.alertType !== 'RowChange';
    // except row removed
    const hasHighlightRow = !rowRemovedAlert;
    // except row changed
    const hasJumpToCell = props.alertType !== 'RowChange';
    // for all
    const showInSeparateDiv = true;
    // for all
    const logToConsole = true;
    // except row removed
    const hasJumpToRow = !rowRemovedAlert;
    const onChange = (AlertProperties) => {
        props.onChange({
            ...data,
            AlertProperties: {
                ...data.AlertProperties,
                ...AlertProperties,
            },
        });
    };
    return (React.createElement(Tabs_1.Tabs, null,
        React.createElement(Tabs_1.Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
        React.createElement(Tabs_1.Tabs.Content, null,
            hasPreventCellEdit && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, disabled: true },
                "Prevent Cell Edit",
                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
            hasHighlightCell && (React.createElement(HighlightStyle, { dataName: "highlight-cell", highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
                    onChange({ HighlightCell });
                } })),
            hasHighlightRow && (React.createElement(HighlightStyle, { dataName: "highlight-row", highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
                    onChange({ HighlightRow });
                } })),
            hasJumpToCell && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-cell", checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
                    onChange({ JumpToCell });
                } }, "Jump To Cell")),
            hasJumpToRow && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-row", checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
                    onChange({ JumpToRow });
                } }, "Jump To Row")),
            showInSeparateDiv && (React.createElement(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
                    onChange({ ShowInDiv });
                } },
                "Show in separate ",
                React.createElement(CodeBlock_1.CodeBlock, null, `<div />`),
                " element")),
            logToConsole && (React.createElement(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
                    onChange({ LogToConsole });
                } }, "Log To Console")))));
};
exports.AlertBehaviourWizardSection = AlertBehaviourWizardSection;
