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 { Collapse, TextField } 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 * as am4core from '@amcharts/amcharts4/core';
import { PropertyEditorBoolean } from '../../CommonUI/PropertyEditing/PropertyEditorBoolean';
import { chartNonSeries } from './ChartSameple';
export var ChartType;
(function (ChartType) {
    ChartType["BarChart"] = "BarChart";
    ChartType["LineChart"] = "LineChart";
})(ChartType || (ChartType = {}));
export class XLineChart extends XBaseControl {
    constructor() {
        super();
        this.chartType = ChartType.BarChart;
        this.label = 'Configure Label';
        this.randomColor = true;
        this.showLegend = false;
        this.show3D = false;
        this.multiValue = false;
        this.stackValue = false;
        // this.tooltip = false;
        this.cursor = false;
        this.exportable = false;
    }
    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;
    }
    updateColor() {
        var _a;
        const dataDef = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form.getInputDefinition();
        const chartDataDef = dataDef === null || dataDef === void 0 ? void 0 : dataDef.getFieldByDataPath(this.dataName);
        const fields = chartDataDef.fields;
        const colorDefIndex = fields.findIndex((field => field.name === 'color'));
        if (colorDefIndex > -1 && this.randomColor) {
            fields.splice(colorDefIndex, 1);
        }
        if (colorDefIndex === -1 && !this.randomColor) {
            const colorDef = new StringDataDefinition('color');
            fields.push(colorDef);
        }
        this.controlUpdate();
    }
    updateChartData(e) {
        var _a;
        const value = e.target.value;
        const dataDef = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form.getInputDefinition();
        if (this.dataName) {
            const chartDataDef = dataDef === null || dataDef === void 0 ? void 0 : dataDef.getFieldByDataPath(this.dataName);
            chartDataDef.name = value;
            const fields = chartDataDef.fields;
            const colorDefIndex = fields.findIndex((field => field.name === 'color'));
            if (colorDefIndex > -1 && this.randomColor) {
                fields.slice(colorDefIndex, 1);
            }
            if (colorDefIndex === -1 && !this.randomColor) {
                const colorDef = new StringDataDefinition('color');
                fields.push(colorDef);
            }
            Reflect.set(this, 'dataName', value);
        }
        else {
            Reflect.set(this, 'dataName', value);
            const chartDataDef = new ObjectDataDefinition(value);
            chartDataDef.list = true;
            const labelDef = new StringDataDefinition(this.labelName);
            const valueDef = new NumberDataDefinition(this.valueName);
            chartDataDef.fields.push(labelDef);
            chartDataDef.fields.push(valueDef);
            if (!this.randomColor) {
                const colorDef = new StringDataDefinition('color');
                chartDataDef.fields.push(colorDef);
            }
            dataDef === null || dataDef === void 0 ? void 0 : dataDef.fields.push(chartDataDef);
        }
        this.controlUpdate();
    }
    getChartDefSampleValue() {
        var _a;
        const dataDef = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form.getInputDefinition();
        if (!dataDef || !this.dataName) {
            return chartNonSeries;
        }
        const data = Reflect.get(dataDef.value, this.dataName);
        if (!data)
            return chartNonSeries;
        return data.map(dataItem => {
            if (dataItem.color) {
                return {
                    label: dataItem.label,
                    value: dataItem.value,
                    color: am4core.color(dataItem.color)
                };
            }
            else {
                return {
                    label: dataItem.label,
                    value: dataItem.value
                };
            }
        });
    }
    render() {
        return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                this.getChartDefSampleValue() && this.getChartDefSampleValue().length > 0 && (_jsx("div", { children: _jsx(Chart, { options: {
                            data: this.getChartDefSampleValue(),
                            category: this.labelName,
                            value: this.valueName,
                            chartType: this.chartType,
                            showLegend: this.showLegend,
                            legendPosition: this.legendPosition,
                            show3D: this.show3D,
                            // tooltip: this.tooltip,
                            cursor: this.cursor,
                            exportable: this.exportable
                        } }, void 0) }, void 0))] }, void 0));
    }
    renderEditUI() {
        return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorText, { editObject: this, label: "Label", propertyName: "label", updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorSelect, { options: Object.keys(ChartType), propertyName: "chartType", editObject: this, label: "Chart Type", updateCallback: this.controlUpdate }, void 0),
                _jsx(TextField, { label: "Dataname", value: this.dataName, onChange: (e) => this.updateChartData(e), variant: "outlined" }, void 0),
                _jsx(PropertyEditorText, { editObject: this, label: "Value axis title", propertyName: "valueName", updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorText, { editObject: this, label: "Label axis title", propertyName: "labelName", updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Legend", propertyName: "showLegend", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.showLegend }, { children: _jsx(PropertyEditorSelect, { label: "Legend Position", options: ['top', 'bottom', 'left', 'right'], propertyName: "legendPosition", editObject: this, updateCallback: this.controlUpdate }, void 0) }), void 0),
                _jsx(PropertyEditorBoolean, { label: "Show 3D", propertyName: "show3D", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Cursor", propertyName: "cursor", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Exportable", propertyName: "exportable", editObject: this, updateCallback: this.controlUpdate }, void 0)] }, void 0));
    }
}
//# sourceMappingURL=XLineChart.js.map