"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnWizardStyleSection = exports.renderStyledColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../../../../components/CheckBox");
const ErrorBox_1 = tslib_1.__importDefault(require("../../../../components/ErrorBox"));
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const Tag_1 = require("../../../../components/Tag");
const ColorPicker_1 = require("../../../../components/ColorPicker");
const RangesComponent_1 = require("../../../Components/RangesComponent");
const StyleVisualItem_1 = require("../../../Components/StyleVisualItem");
const UIHelper_1 = require("../../../UIHelper");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const PercentBarColumnComparisonPreview_1 = require("./Components/PercentBarColumnComparisonPreview");
const PercentBarRangesPreview_1 = require("./Components/PercentBarRangesPreview");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const renderFormatColumnStyleWizardSummary = (data) => {
    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    return (0, exports.renderStyledColumnStyleSummary)(data, api);
};
exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
const getRanges = (ranges, rangeValueType) => {
    let postfix = '';
    if (rangeValueType === 'Percentage') {
        postfix = '%';
    }
    return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
        React.createElement(rebass_1.Box, { mr: 1 },
            r.Min,
            postfix,
            " to ",
            r.Max,
            postfix,
            ' '),
        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
                BackColor: r.Color,
                ForeColor: r.Color,
            } }))));
};
const getColumnComparison = (columnComparison, api) => {
    return (React.createElement(rebass_1.Flex, { key: 'cc', alignItems: "center", mr: 3 },
        React.createElement(rebass_1.Box, { mr: 1 },
            "Min Value:",
            ' ',
            isNaN(Number(columnComparison.MinValue))
                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
                : columnComparison.MinValue,
            ' ',
            ", Max Value:",
            ' ',
            isNaN(Number(columnComparison.MaxValue))
                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
                : columnComparison.MaxValue,
            ' '),
        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
                BackColor: columnComparison.Color,
                ForeColor: columnComparison.Color,
            } })));
};
const renderStyledColumnStyleSummary = (data, api) => {
    if (!api) {
        const { api: adaptableApi } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
        api = adaptableApi;
    }
    if (data.GradientStyle) {
        if (data.GradientStyle.CellRanges) {
            return getRanges(data.GradientStyle.CellRanges, data.GradientStyle.RangeValueType);
        }
        if (data.GradientStyle.ColumnComparison) {
            return getColumnComparison(data.GradientStyle.ColumnComparison, api);
        }
    }
    if (data.PercentBarStyle) {
        if (data.PercentBarStyle.ColumnComparison) {
            return React.createElement(PercentBarColumnComparisonPreview_1.PercentBarColumnComparisonPreview, { percentBarStyle: data.PercentBarStyle });
        }
        if (data.PercentBarStyle.CellRanges) {
            return React.createElement(PercentBarRangesPreview_1.PercentBarPreview, { percentBarStyle: data.PercentBarStyle });
        }
    }
    return React.createElement(Tag_1.Tag, null, "No Styling Defined");
};
exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
const StyledColumnWizardStyleSection = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const minMaxRangeValues = React.useMemo(() => {
        const columnId = data.ColumnId;
        if (!columnId) {
            return null;
        }
        const column = api.columnApi.getColumnWithColumnId(columnId);
        return {
            min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
            max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
        };
    }, [data]);
    const scope = { ColumnIds: [data.ColumnId] }; // TODO: remove scope when format column columnStyle is removed
    // gradient
    const onUpdateGradientStyleRanges = (ranges) => {
        const gradientStyle = Object.assign(Object.assign({}, data.GradientStyle), { CellRanges: ranges });
        // delete gradientStyle.ColumnComparison in case we are switching from ColumnComparison to CellRanges
        delete gradientStyle.ColumnComparison;
        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle: gradientStyle }));
    };
    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
        const GradientStyle = {
            ColumnComparison: columnComparison,
        };
        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
    };
    // percentbar
    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { ColumnComparison: columnComparison });
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
    };
    const onUpdatePercentBarStyleRanges = (ranges) => {
        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { CellRanges: ranges });
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
    };
    const onPercentBarCellTextCellValueChanged = (checked) => {
        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
        if (checked) {
            if (!percentBarStyle.CellText) {
                percentBarStyle.CellText = ['CellValue'];
            }
            else {
                percentBarStyle.CellText.push('CellValue');
            }
        }
        else {
            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('PercentageValue')) {
                percentBarStyle.CellText = ['PercentageValue'];
            }
            else {
                percentBarStyle.CellText = [];
            }
        }
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
    };
    const onPercentBarCellTextPercentValueChanged = (checked) => {
        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
        if (checked) {
            if (!percentBarStyle.CellText) {
                percentBarStyle.CellText = ['PercentageValue'];
            }
            else {
                percentBarStyle.CellText.push('PercentageValue');
            }
        }
        else {
            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('CellValue')) {
                percentBarStyle.CellText = ['CellValue'];
            }
            else {
                percentBarStyle.CellText = [];
            }
        }
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
    };
    const handlePercentBarCellTextPositionChange = (percentBarPosition) => {
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: Object.assign(Object.assign({}, data.PercentBarStyle), { CellTextPosition: percentBarPosition }) }));
    };
    const onPercentBarToolTipTextCellValueChanged = (checked) => {
        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
        if (checked) {
            if (!percentBarStyle.ToolTipText) {
                percentBarStyle.ToolTipText = ['CellValue'];
            }
            else {
                percentBarStyle.ToolTipText.push('CellValue');
            }
        }
        else {
            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('PercentageValue')) {
                percentBarStyle.ToolTipText = ['PercentageValue'];
            }
            else {
                percentBarStyle.ToolTipText = [];
            }
        }
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
    };
    const onPercentBarToolTipTextPercentValueChanged = (checked) => {
        let percentBarStyle = data.PercentBarStyle;
        if (checked) {
            if (!percentBarStyle.ToolTipText) {
                percentBarStyle.ToolTipText = ['PercentageValue'];
            }
            else {
                percentBarStyle.ToolTipText.push('PercentageValue');
            }
        }
        else {
            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('CellValue')) {
                percentBarStyle.ToolTipText = ['CellValue'];
            }
            else {
                percentBarStyle.ToolTipText = [];
            }
        }
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
    };
    const onUsePercentStyleColorCheckChanged = (checked) => {
        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
        percentBarStyle.BackColor = checked ? (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY) : null;
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
    };
    const onForeColorSelectChange = (color) => {
        let percentBarStyle = data.PercentBarStyle;
        percentBarStyle.BackColor = color;
        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
    };
    const handleRangeValueTypeChange = React.useCallback((rangeValueType) => {
        const ranges = rangeValueType === 'Number'
            ? api.columnScopeApi.createCellColorRangesForScope(scope)
            : [
                {
                    Min: 0,
                    Max: 100,
                    Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
                },
            ];
        let newStyledColumn = data;
        const commonStyle = {
            CellRanges: ranges,
            RangeValueType: rangeValueType,
        };
        if ('GradientStyle' in newStyledColumn) {
            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { GradientStyle: Object.assign(Object.assign({}, newStyledColumn.GradientStyle), commonStyle) });
        }
        else {
            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { PercentBarStyle: Object.assign(Object.assign({}, newStyledColumn.PercentBarStyle), commonStyle) });
        }
        props.onChange(newStyledColumn);
    }, [data]);
    const disabled = !data.ColumnId;
    return (React.createElement(rebass_1.Box, null,
        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, rangeValueType: (_b = data.GradientStyle) === null || _b === void 0 ? void 0 : _b.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_c = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
        data.PercentBarStyle && (React.createElement(React.Fragment, null,
            React.createElement(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_d = data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.CellRanges, rangeValueType: (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_f = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _f === void 0 ? void 0 : _f.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
            React.createElement(FormLayout_1.default, { marginLeft: 2, marginTop: 2 },
                React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_h = (_g = data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
                    ' ',
                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.CellText) === null || _k === void 0 ? void 0 : _k.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
                        "Percent Value",
                        ' '),
                    ' '),
                React.createElement(FormLayout_1.FormRow, { label: "Cell Display Position:" },
                    React.createElement(DropdownButton_1.default, { disabled: ArrayExtensions_1.default.IsNullOrEmpty(data.PercentBarStyle.CellText) || disabled, columns: ['label'], items: [
                            {
                                label: 'Above Bar',
                                onClick: () => handlePercentBarCellTextPositionChange('Above'),
                            },
                            {
                                label: 'Below Bar',
                                onClick: () => handlePercentBarCellTextPositionChange('Below'),
                            },
                            {
                                label: 'Merged',
                                onClick: () => handlePercentBarCellTextPositionChange('Merged'),
                            },
                        ] }, (_m = (_l = data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.CellTextPosition) !== null && _m !== void 0 ? _m : 'Below')),
                React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_p = (_o = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.ToolTipText) === null || _p === void 0 ? void 0 : _p.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
                    ' ',
                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_r = (_q = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.ToolTipText) === null || _r === void 0 ? void 0 : _r.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
                        "Percent Value",
                        ' '),
                    ' '),
                React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
                    React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_s = data.PercentBarStyle) === null || _s === void 0 ? void 0 : _s.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
                        ((_t = data.PercentBarStyle) === null || _t === void 0 ? void 0 : _t.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_u = data.PercentBarStyle) === null || _u === void 0 ? void 0 : _u.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
        !data.ColumnId && React.createElement(ErrorBox_1.default, { mt: 2 }, "You need to select a column before styling.")));
};
exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;
