"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RangesComponent = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const ColorPicker_1 = require("../../components/ColorPicker");
const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
const CheckBox_1 = require("../../components/CheckBox");
const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
const NumberInput_1 = require("../../components/Input/NumberInput");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const UIHelper_1 = require("../UIHelper");
const ColumnSelector_1 = require("./Selectors/ColumnSelector");
const Tabs_1 = require("../../components/Tabs");
const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
class RangesComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            rangesType: this.props.columnComparison ? 'ColumnComparison' : 'Standard',
        };
    }
    render() {
        let comparisonMinValueNumber = this.props.columnComparison != null &&
            this.props.columnComparison.MinValue != null &&
            !isNaN(Number(this.props.columnComparison.MinValue))
            ? Number(this.props.columnComparison.MinValue)
            : '';
        let comparisonMaxValueNumber = this.props.columnComparison != null &&
            this.props.columnComparison.MaxValue != null &&
            !isNaN(Number(this.props.columnComparison.MaxValue))
            ? Number(this.props.columnComparison.MaxValue)
            : '';
        let comparisonMinValueColumnId = this.props.columnComparison != null &&
            this.props.columnComparison.MinValue != null &&
            isNaN(Number(this.props.columnComparison.MinValue))
            ? String(this.props.columnComparison.MinValue)
            : undefined;
        let comparisonMaxValueColumnId = this.props.columnComparison != null &&
            this.props.columnComparison.MaxValue != null &&
            isNaN(Number(this.props.columnComparison.MaxValue))
            ? String(this.props.columnComparison.MaxValue)
            : undefined;
        let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
            ? this.props.columnComparison.Color
            : undefined;
        const isRangeValueTypeNumber = (this.props.rangeValueType ?? 'Number') === 'Number';
        return (React.createElement(React.Fragment, null,
            React.createElement(rebass_1.Flex, { flexDirection: "row" },
                React.createElement(CheckBox_1.CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
            this.state.rangesType == 'Standard' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                React.createElement(Tabs_1.Tabs.Tab, null, "Ranges"),
                React.createElement(Tabs_1.Tabs.Content, null,
                    React.createElement(rebass_1.Flex, { alignItems: "center", mb: 2 },
                        React.createElement(rebass_1.Text, { mr: 3 }, "Range Type"),
                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")),
                    this.props.ranges?.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
                            React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled ||
                                    range.Min === 'Col-Min' ||
                                    (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
                                    this.changeRangeMin(index, value);
                                }, mr: 2 })),
                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
                            React.createElement(NumberInput_1.NumberInput, { value: range.Max, disabled: this.props.disabled ||
                                    range.Max === 'Col-Max' ||
                                    (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                    this.changeRangeMax(index, value);
                                }, mr: 2 })),
                        React.createElement(rebass_1.Flex, { alignItems: "center", height: "100%" },
                            React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                    this.changeRangeColor(index, color);
                                }, mr: 2, height: 33 })),
                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), ml: 2 }, "Reverse Gradient")),
                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
                    React.createElement("div", null,
                        React.createElement(SimpleButton_1.default, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
            this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                React.createElement(Tabs_1.Tabs.Tab, null, "Column Comparison"),
                React.createElement(Tabs_1.Tabs.Content, null,
                    React.createElement(rebass_1.Flex, { flexDirection: "column", key: 'cc', "data-name": "percent-bar-column-comparison" },
                        React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 },
                            "Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a",
                            ' ',
                            this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
                            " for the Bar."),
                        React.createElement(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
                                        this.changeColumnComparisonMinValue(value);
                                    } }), or: "OR", second: React.createElement(rebass_1.Box, { maxWidth: '15rem' },
                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
                                            this.onMinColumnSelectedChanged(columnId);
                                        } })) }),
                            ' ',
                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
                                        this.changeColumnComparisonMaxValue(value);
                                    } }), or: "OR", second: React.createElement(rebass_1.Box, { maxWidth: '15rem' },
                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                        this.changeColumnComparisonColor(color);
                                    } }) }))))))));
    }
    onRangesTypeChanged(checked) {
        if (checked) {
            let columnComparison = {
                Color: (0, UIHelper_1.getHexForName)(UIHelper_1.DARK_GREEN),
                MinValue: undefined,
                MaxValue: undefined,
            };
            this.setState({
                rangesType: 'ColumnComparison',
            });
            this.props.updateColumnComparison(columnComparison);
        }
        else {
            const ranges = this.props.api.columnScopeApi.createCellColorRangesForScope(this.props.scope);
            this.setState({
                rangesType: 'Standard',
            });
            this.props.updateRanges(ranges);
        }
    }
    handleRangeValueTypeChange(rangeValueType) {
        this.props.onRangeValueTypeChange(rangeValueType);
    }
    changeRangeMin(index, value) {
        const { ranges } = this.props;
        let newMin = Number(value);
        if (this.props.rangeValueType === 'Percentage') {
            newMin = (0, clamp_1.default)(newMin, 0, 100);
        }
        ranges[index].Min = newMin;
        if (ranges[index - 1]) {
            ranges[index - 1].Max = newMin;
        }
        this.props.updateRanges(ranges);
    }
    changeRangeMax(index, value) {
        const { ranges } = this.props;
        let newMax = Number(value);
        if (this.props.rangeValueType === 'Percentage') {
            newMax = (0, clamp_1.default)(newMax, 0, 100);
        }
        ranges[index].Max = newMax;
        if (ranges[index + 1]) {
            ranges[index + 1].Min = newMax;
        }
        this.props.updateRanges(ranges);
    }
    changeRangeColor(index, value) {
        const { ranges } = this.props;
        ranges[index].Color = value;
        this.props.updateRanges(ranges);
    }
    changeRangeDirectionUp(index, checked) {
        const { ranges } = this.props;
        ranges[index].ReverseGradient = checked;
        this.props.updateRanges(ranges);
    }
    removeRange(index) {
        let ranges = [...this.props.ranges];
        ranges.splice(index, 1);
        // Max 100 is always disabled, this prevents from having a Max range lower than 100
        if (this.props.rangeValueType === 'Percentage' && ranges.length === 1) {
            ranges[0] = {
                ...ranges[0],
                Max: 100,
            };
        }
        this.props.updateRanges(ranges);
    }
    setRangeColMin(range) {
        const newRanges = this.props.ranges.map((rangeItem) => {
            if (rangeItem === range) {
                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
                return {
                    ...rangeItem,
                    Min: newMin,
                };
            }
            return rangeItem;
        });
        this.props.updateRanges(newRanges);
    }
    setRangeColMax(range) {
        const newRanges = this.props.ranges.map((rangeItem) => {
            if (rangeItem === range) {
                let newMax = rangeItem.Max === 'Col-Max' ? this.props.minMaxRangeValues.max : 'Col-Max';
                return {
                    ...rangeItem,
                    Max: newMax,
                };
            }
            return rangeItem;
        });
        this.props.updateRanges(newRanges);
    }
    addRange() {
        const lastRange = this.props.ranges[this.props.ranges.length - 1];
        let previousRange = lastRange;
        let Min = null;
        if (lastRange.Max === 'Col-Max') {
            Min = this.props.minMaxRangeValues.max;
            previousRange = {
                ...previousRange,
                Max: this.props.minMaxRangeValues.max,
            };
        }
        else {
            Min = lastRange.Max;
        }
        const newRange = {
            Min,
            Max: lastRange.Max,
            Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
        };
        const newRanges = [...this.props.ranges.slice(0, -1), previousRange, newRange];
        this.props.updateRanges(newRanges);
    }
    changeColumnComparisonMinValue(value) {
        const { columnComparison } = this.props;
        columnComparison.MinValue = value;
        this.props.updateColumnComparison(columnComparison);
    }
    onMinColumnSelectedChanged(columnId) {
        const { columnComparison } = this.props;
        columnComparison.MinValue = columnId || undefined;
        this.props.updateColumnComparison(columnComparison);
    }
    changeColumnComparisonMaxValue(value) {
        const { columnComparison } = this.props;
        columnComparison.MaxValue = value;
        this.props.updateColumnComparison(columnComparison);
    }
    onMaxColumnSelectedChanged(columnId) {
        const { columnComparison } = this.props;
        columnComparison.MaxValue = columnId || undefined;
        this.props.updateColumnComparison(columnComparison);
    }
    changeColumnComparisonColor(value) {
        const { columnComparison } = this.props;
        columnComparison.Color = value;
        this.props.updateColumnComparison(columnComparison);
    }
}
exports.RangesComponent = RangesComponent;
