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 { PropertyEditorBoolean } from '../../CommonUI/PropertyEditing/PropertyEditorBoolean';
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 { chartNonSeries } from './ChartSameple';
import { PropertyEditorInteger } from '../../CommonUI/PropertyEditing/PropertyEditorInteger';
export class XPieChart extends XBaseControl {
    constructor() {
        super();
        this.chartType = 'PieChart';
        this.label = 'Configure Label';
        this.showLabel = true;
        this.showToolTip = true;
        this.show3D = false;
        this.colorType = 'Random';
        this.legendPosition = 'No';
        this.customRadius = false;
        this.innerRadius = 40;
        this.isDonut = false;
        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 = new ObjectDataDefinition(this.dataName);
        chartDataDef.list = true;
        const labelDef = new StringDataDefinition('label');
        chartDataDef.fields.push(labelDef);
        const valueDef = new NumberDataDefinition('value');
        chartDataDef.fields.push(valueDef);
        if (this.colorType === 'Custom') {
            const colorDef = new StringDataDefinition('color');
            chartDataDef.fields.push(colorDef);
        }
        if (this.customRadius) {
            const radiusDef = new NumberDataDefinition('radius');
            chartDataDef.fields.push(radiusDef);
        }
        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() {
        var _a;
        const dataDef = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form.getInputDefinition();
        if (!dataDef || !this.dataName) {
            return [];
        }
        const data = Reflect.get(dataDef.value, this.dataName);
        if (!data)
            return [];
        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
                };
            }
        });
    }
    getChartData() {
        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;
    }
    render() {
        var _a;
        return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                this.getChartData() && this.getChartData().length > 0 && (_jsx("div", Object.assign({ "data-testid": this.dataName }, { children: _jsx(Chart, { options: {
                            data: this.getChartData(),
                            chartType: this.chartType,
                            legendPosition: (_a = this.legendPosition) === null || _a === void 0 ? void 0 : _a.toLowerCase(),
                            colorType: this.colorType,
                            showToolTip: this.showToolTip,
                            showLabel: this.showLabel,
                            show3D: this.show3D,
                            isDonut: this.isDonut,
                            innerRadius: this.innerRadius,
                            customRadius: this.customRadius,
                        } }, 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(TextField, { label: "Dataname", value: this.dataName, onChange: (e) => this.updateChartData(e), variant: "outlined" }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Donut", propertyName: "isDonut", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.isDonut }, { children: _jsx(PropertyEditorInteger, { editObject: this, label: "Inner Radius", propertyName: "innerRadius", 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: "Color Schema", options: ['Custom', 'Random'], propertyName: "colorType", editObject: this, updateCallback: this.updateDataDefinition }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Custom Radius", propertyName: "customRadius", editObject: this, updateCallback: this.updateDataDefinition }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show 3D", propertyName: "show3D", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Tooltip", propertyName: "showToolTip", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Labels", propertyName: "showLabel", editObject: this, updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Allow Actions", propertyName: "allowActions", editObject: this, updateCallback: this.controlUpdate }, void 0)] }, void 0));
    }
}
//# sourceMappingURL=XPieChart.js.map