import * as React from 'react';
import { ColorPicker } from '../../components/ColorPicker';
import clamp from 'lodash/clamp';
import { CheckBox } from '../../components/CheckBox';
import FormLayout, { FormRow } from '../../components/FormLayout';
import { NumberInput } from '../../components/Input/NumberInput';
import SimpleButton from '../../components/SimpleButton';
import { getHexForName, GRAY, DARK_GREEN } from '../UIHelper';
import { ColumnSelector } from './Selectors/ColumnSelector';
import { Tabs } from '../../components/Tabs';
import Radio from '../../components/Radio';
import { Box, Flex } from '../../components/Flex';
export 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(Flex, { flexDirection: "row" },
                React.createElement(CheckBox, { className: "twa:mt-3", checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
            this.state.rangesType == 'Standard' && (React.createElement(Tabs, { autoFocus: false, className: "twa:mt-2" },
                React.createElement(Tabs.Tab, null, "Ranges"),
                React.createElement(Tabs.Content, null,
                    React.createElement(Flex, { alignItems: "center", className: "twa:mb-2" },
                        React.createElement(Box, { className: "twa:mr-3" }, "Range Type"),
                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, className: "twa:mr-2" }, "Number"),
                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")),
                    this.props.ranges?.map((range, index, list) => (React.createElement(Flex, { key: index, alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range" },
                        React.createElement(Flex, { flexDirection: "column" },
                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled }, "Col Min")),
                            React.createElement(NumberInput, { disabled: this.props.disabled ||
                                    range.Min === 'Col-Min' ||
                                    (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
                                    this.changeRangeMin(index, value);
                                }, className: "twa:mr-2" })),
                        React.createElement(Flex, { flexDirection: "column" },
                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled }, "Col Max")),
                            React.createElement(NumberInput, { value: range.Max, disabled: this.props.disabled ||
                                    range.Max === 'Col-Max' ||
                                    (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                    this.changeRangeMax(index, value);
                                }, className: "twa:mr-2" })),
                        React.createElement(Flex, { alignItems: "center", className: "twa:h-full" },
                            React.createElement(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                    this.changeRangeColor(index, color);
                                }, className: "twa:mr-2 twa:h-[33px]" })),
                        this.props.showRangeDirection && (React.createElement(CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2" }, "Reverse Gradient")),
                        React.createElement(SimpleButton, { className: "twa:ml-2 twa: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, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
            this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs, { autoFocus: false, className: "twa:mt-2" },
                React.createElement(Tabs.Tab, null, "Column Comparison"),
                React.createElement(Tabs.Content, null,
                    React.createElement(Flex, { flexDirection: "column", key: 'cc', "data-name": "percent-bar-column-comparison" },
                        React.createElement(Box, { className: "twa:p-2 twa:text-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, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
                            React.createElement(FormRow, { label: "Min Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
                                        this.changeColumnComparisonMinValue(value);
                                    } }), or: "OR", second: React.createElement(Box, { className: "twa:max-w-[15rem]" },
                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
                                            this.onMinColumnSelectedChanged(columnId);
                                        } })) }),
                            ' ',
                            React.createElement(FormRow, { label: "Max Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
                                        this.changeColumnComparisonMaxValue(value);
                                    } }), or: "OR", second: React.createElement(Box, { className: "twa:max-w-[15rem]" },
                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
                            React.createElement(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                        this.changeColumnComparisonColor(color);
                                    } }) }))))))));
    }
    onRangesTypeChanged(checked) {
        if (checked) {
            let columnComparison = {
                Color: getHexForName(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 = clamp(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 = clamp(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: getHexForName(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);
    }
}
