import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ValidationIssue } from '../../Common/IDesignValidationProvider';
import { XBaseControl } from './XBaseControl';
import { PropertyEditorSelect } from '../../CommonUI/PropertyEditing/PropertyEditorSelect';
import { PropertyEditorText } from '../../CommonUI/PropertyEditing/PropertyEditorText';
import { StyledInputLabel } from "./XCommonStyled";
import { validateVariableName } from '../../Common/DataValidationUtilities';
import { Box, Button, Collapse, IconButton, TextField, Typography } from '@material-ui/core';
import { ObjectDataDefinition } from '../../Common/Data/Definitions/ObjectDataDefinition';
import { StringDataDefinition } from '../../Common/Data/Definitions/StringDataDefinition';
import { NumberDataDefinition } from '../../Common/Data/Definitions/NumberDataDefinition';
import Chart from '../../CommonUI/Components/Chart';
import { PropertyEditorBoolean } from '../../CommonUI/PropertyEditing/PropertyEditorBoolean';
import { chartNestedSeriesWithExtraData, chartNestedSeriesWithoutExtraData, chartNonNestSeries, chartNonSeries } from './ChartSameple';
import { PropertyEditorColor } from '../../CommonUI/PropertyEditing/PropertyEditorColor';
import { PropertyEditorFloat } from '../../CommonUI/PropertyEditing/PropertyEditorFloat';
import styled from 'styled-components';
import { RemoveCircleOutline } from '@material-ui/icons';
export class XBarChart extends XBaseControl {
    constructor() {
        super();
        this.chartType = "BarChart";
        this.label = 'Configure Label';
        this.colorType = 'Random';
        this.showLegend = false;
        this.render3D = false;
        this.legendPosition = 'No';
        // this.tooltip = false;
        this.cursor = false;
        this.showXYAxis = true;
        this.numberFormatter = "Normal";
        this.customNumberFormatter = "#";
        this.lowerBounds = 0;
        this.upperBounds = 100;
        this.setLowerBounds = false;
        this.setUpperBounds = false;
        this.allowSeries = false;
        this.seriesNames = ['amount', 'count'];
        this.seriesDataType = 'Nested';
        this.showIncrements = false;
        this.increment = '100';
        this.updateDataDefinition = this.updateDataDefinition.bind(this);
    }
    getDesignValidationIssues() {
        let issues = [];
        if (!this.dataName) {
            issues.push(new ValidationIssue("Data name is required", undefined, this.id));
        }
        else {
            let varIssue = validateVariableName(this.dataName);
            if (varIssue) {
                varIssue.dataName = this.dataName;
                varIssue.elementId = this.id;
                issues.push(varIssue);
            }
        }
        return issues;
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return undefined;
    }
    getDataDefinition() {
        if (!this.dataName)
            return;
        let chartDataDef = null;
        chartDataDef = new ObjectDataDefinition(this.dataName);
        if (!this.allowSeries) {
            chartDataDef.list = true;
            const labelDef = new StringDataDefinition('label');
            const valueDef = new NumberDataDefinition('value');
            chartDataDef.fields.push(labelDef);
            chartDataDef.fields.push(valueDef);
            if (this.colorType === 'Custom') {
                const colorDef = new StringDataDefinition('color');
                chartDataDef.fields.push(colorDef);
            }
            return chartDataDef;
        }
        if (this.seriesDataType === 'Nested') {
            chartDataDef.list = true;
            const labelDef = new StringDataDefinition('label');
            chartDataDef.fields.push(labelDef);
            if (this.colorType === 'Custom') {
                if (this.seriesNames) {
                    for (const series of this.seriesNames) {
                        const seriesDataDef = new ObjectDataDefinition(series);
                        const valueDef = new NumberDataDefinition('value');
                        const colorDef = new StringDataDefinition('color');
                        seriesDataDef.fields.push(valueDef);
                        seriesDataDef.fields.push(colorDef);
                        chartDataDef.fields.push(seriesDataDef);
                    }
                }
            }
            else {
                if (this.seriesNames) {
                    for (const series of this.seriesNames) {
                        const seriesDataDef = new NumberDataDefinition(series);
                        chartDataDef.fields.push(seriesDataDef);
                    }
                }
            }
            return chartDataDef;
        }
        if (this.seriesNames) {
            for (const series of this.seriesNames) {
                const seriesDataDef = new ObjectDataDefinition(series);
                seriesDataDef.list = true;
                const labelDef = new StringDataDefinition('label');
                seriesDataDef.fields.push(labelDef);
                const valueDef = new NumberDataDefinition('value');
                seriesDataDef.fields.push(valueDef);
                if (this.colorType === 'Custom') {
                    const colorDef = new StringDataDefinition('color');
                    seriesDataDef.fields.push(colorDef);
                }
                chartDataDef.fields.push(seriesDataDef);
            }
        }
        return chartDataDef;
    }
    updateDataDefinition(previous) {
        var _a;
        const dataDef = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form.getInputDefinition();
        const findKey = (previous ? previous : this.dataName);
        if (dataDef) {
            let tempFields = dataDef.fields;
            if (findKey) {
                tempFields = dataDef.fields.filter(field => field.name !== findKey);
            }
            const chartDataDef = this.getDataDefinition();
            if (chartDataDef) {
                tempFields.push(chartDataDef);
            }
            Reflect.set(dataDef, 'fields', tempFields);
        }
        this.controlUpdate();
    }
    updateChartData(e) {
        const value = e.target.value;
        const previous = this.dataName;
        this.dataName = value;
        this.updateDataDefinition(previous);
    }
    getChartDefSampleValue() {
        if (this.allowSeries) {
            if (this.seriesDataType === 'Nested') {
                if (this.colorType === 'Custom') {
                    return chartNestedSeriesWithExtraData;
                }
                else {
                    return chartNestedSeriesWithoutExtraData;
                }
            }
            else {
                return chartNonNestSeries;
            }
        }
        return chartNonSeries;
    }
    getChartData() {
        var _a;
        const dataDef = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form.getInputDefinition();
        if (!dataDef || !this.dataName) {
            return this.getChartDefSampleValue();
        }
        const data = Reflect.get(dataDef.value, this.dataName);
        if (!data)
            return this.getChartDefSampleValue();
        return data;
    }
    render() {
        var _a;
        return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                this.getChartData() && (this.getChartData().length > 0 || Object.keys(this.getChartData()).length > 0) && (_jsx("div", Object.assign({ "data-testid": this.dataName }, { children: _jsx(Chart, { options: {
                            data: this.getChartData(),
                            category: this.xAxisLabel,
                            value: this.yAxisLabel,
                            chartType: this.chartType,
                            allowSeries: this.allowSeries,
                            seriesNames: this.seriesNames,
                            legendPosition: (_a = this.legendPosition) === null || _a === void 0 ? void 0 : _a.toLowerCase(),
                            show3D: this.render3D,
                            cursor: this.cursor,
                            colorType: this.colorType,
                            color: this.color,
                            showXYAxis: this.showXYAxis,
                            numberFormatter: this.numberFormatter,
                            customNumberFormatter: this.customNumberFormatter,
                            showToolTip: this.showTooltip,
                            setLowerBounds: this.setLowerBounds,
                            lowerBounds: this.lowerBounds,
                            setUpperBounds: this.setUpperBounds,
                            upperBounds: this.upperBounds,
                            stackBars: this.stackBars,
                            seriesDataType: this.seriesDataType,
                            showIncrements: this.showIncrements,
                            increment: parseInt(this.increment),
                        } }, void 0) }), void 0))] }, void 0));
    }
    renderEditUI() {
        var _a;
        return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorText, { editObject: this, label: "Label", propertyName: "label", updateCallback: this.controlUpdate }, void 0),
                _jsx(TextField, { label: "Dataname", value: this.dataName, onChange: (e) => this.updateChartData(e), variant: "outlined" }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Allow Series", propertyName: "allowSeries", editObject: this, updateCallback: this.updateDataDefinition }, void 0),
                _jsxs(Collapse, Object.assign({ in: this.allowSeries }, { children: [_jsxs(StyledContainer, { children: [_jsx(Typography, { children: "Series" }, void 0), (_a = this.seriesNames) === null || _a === void 0 ? void 0 : _a.map((seriesName, key) => (_jsx(TextField, { value: seriesName, onChange: (e) => {
                                        this.seriesNames[key] = e.target.value;
                                        this.updateDataDefinition();
                                    }, variant: "outlined", InputProps: {
                                        endAdornment: (_jsx(IconButton, Object.assign({ onClick: () => {
                                                var _a;
                                                (_a = this.seriesNames) === null || _a === void 0 ? void 0 : _a.splice(key, 1);
                                                this.updateDataDefinition();
                                            } }, { children: _jsx(RemoveCircleOutline, {}, void 0) }), void 0)),
                                    } }, key))), _jsx(Button, Object.assign({ variant: "contained", color: "primary", onClick: () => {
                                        this.seriesNames.push('series_' + (this.seriesNames.length + 1));
                                        this.updateDataDefinition();
                                    } }, { children: "Add Series" }), void 0)] }, void 0),
                        _jsx(PropertyEditorBoolean, { label: "Stacked", propertyName: "stackBars", editObject: this, updateCallback: this.updateDataDefinition }, void 0),
                        _jsx(PropertyEditorSelect, { label: "Nested", options: ['Nested', 'Non Nested'], propertyName: "seriesDataType", editObject: this, updateCallback: this.updateDataDefinition }, void 0)] }), void 0),
                _jsx(PropertyEditorText, { editObject: this, label: "X Axis Label", propertyName: "xAxisLabel", updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorText, { editObject: this, label: "Y Axis Label", propertyName: "yAxisLabel", updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Render 3D", propertyName: "render3D", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show X/Y Axis", propertyName: "showXYAxis", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Set Lower Bounds", propertyName: "setLowerBounds", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.setLowerBounds }, { children: _jsx(PropertyEditorFloat, { editObject: this, label: "Lower Bounds Value", propertyName: "lowerBounds", updateCallback: this.controlUpdate }, void 0) }), void 0),
                _jsx(PropertyEditorBoolean, { label: "Set Upper Bounds", propertyName: "setUpperBounds", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.setUpperBounds }, { children: _jsx(PropertyEditorFloat, { editObject: this, label: "Upper Bounds Value", propertyName: "upperBounds", updateCallback: this.controlUpdate }, void 0) }), void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Increaments Lines", propertyName: "showIncrements", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.showIncrements && this.setUpperBounds && this.setLowerBounds }, { children: _jsx(PropertyEditorSelect, { editObject: this, options: ['5', '10', '20', '25', '50', '100', '200', '250', '500', '1000', '2000', '2500', '5000', '10000'], label: "Increment Value", propertyName: "increment", updateCallback: this.controlUpdate }, void 0) }), void 0),
                _jsx(PropertyEditorSelect, { label: "Show Legend", options: ['No', 'Top', 'Bottom', 'Left', 'Right'], propertyName: "legendPosition", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorSelect, { label: "Number Formatter", options: ['Normal', 'Currency', 'BigNumber', 'Byte', 'Percent', 'Custom'], propertyName: "numberFormatter", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.numberFormatter === 'Custom' }, { children: _jsx(PropertyEditorText, { editObject: this, label: "Custom Number Formatter", propertyName: "customNumberFormatter", updateCallback: this.controlUpdate }, void 0) }), void 0),
                _jsx(PropertyEditorSelect, { label: "Color Schema", options: ['Custom', 'Mono', 'Random'], propertyName: "colorType", editObject: this, updateCallback: this.updateDataDefinition }, void 0),
                _jsx(Collapse, Object.assign({ in: this.colorType === 'Mono' }, { children: _jsx(PropertyEditorColor, { label: "Color", propertyName: "color", editObject: this, updateCallback: this.controlUpdate }, void 0) }), void 0),
                _jsx(PropertyEditorBoolean, { label: "Active Pointer", propertyName: "cursor", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Allow Actions", propertyName: "allowActions", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Tooltip", propertyName: "showTooltip", editObject: this, updateCallback: this.controlUpdate }, void 0)] }, void 0));
    }
}
const StyledContainer = styled(Box) `
    padding: 16px;
    border-radius: 4px;
    border: 1px solid lightgray;
`;
//# sourceMappingURL=XBarChart.js.map