"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PieChartFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const FormControl_1 = require("../FormControl");
const PropertyEditorSelect_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorSelect");
const PropertyEditorText_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorText");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const CommonStyled_1 = require("./CommonStyled");
const DataValidationUtilities_1 = require("@appglue/common/dist/Common/DataValidationUtilities");
const core_1 = require("@material-ui/core");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const NumberDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/NumberDataDefinition");
const UIChart_1 = tslib_1.__importDefault(require("../../../CommonUI/BuildlingBlocks/UIChart"));
const ChartSameple_1 = require("../Testing/ChartSameple");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class PieChartFormControl extends FormControl_1.FormControl {
    __type = "Pie Chart";
    chartType;
    innerRadius;
    objectPath;
    dataName;
    label;
    isDonut;
    showLabel;
    showToolTip;
    show3D;
    colorType;
    legendPosition;
    customRadius;
    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 IDesignValidationProvider_1.ValidationIssue("Data name is required", undefined, this.id));
        }
        else {
            let varIssue = (0, DataValidationUtilities_1.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_1.ObjectDataDefinition(this.dataName);
        chartDataDef.list = true;
        const labelDef = new StringDataDefinition_1.StringDataDefinition("label");
        chartDataDef.fields.push(labelDef);
        const valueDef = new NumberDataDefinition_1.NumberDataDefinition("value");
        chartDataDef.fields.push(valueDef);
        if (this.colorType === "Custom") {
            const colorDef = new StringDataDefinition_1.StringDataDefinition("color");
            chartDataDef.fields.push(colorDef);
        }
        if (this.customRadius) {
            const radiusDef = new NumberDataDefinition_1.NumberDataDefinition("radius");
            chartDataDef.fields.push(radiusDef);
        }
        return chartDataDef;
    }
    updateDataDefinition(previous) {
        const dataDef = this.getFormContext()?.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() {
        const dataDef = this.getFormContext()?.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: dataItem.color,
                };
            }
            else {
                return {
                    label: dataItem.label,
                    value: dataItem.value,
                };
            }
        });
    }
    getChartData() {
        const dataDef = this.getFormContext()?.form.getInputDefinition();
        if (!dataDef || !this.dataName) {
            return ChartSameple_1.chartNonSeries;
        }
        const data = Reflect.get(dataDef.value, this.dataName);
        if (!data)
            return ChartSameple_1.chartNonSeries;
        return data;
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: this.label }), this.getChartData() && this.getChartData().length > 0 && ((0, jsx_runtime_1.jsx)("div", { "data-testid": this.dataName, children: (0, jsx_runtime_1.jsx)(UIChart_1.default, { options: {
                            data: this.getChartData(),
                            chartType: this.chartType,
                            legendPosition: this.legendPosition?.toLowerCase(),
                            colorType: this.colorType,
                            showToolTip: this.showToolTip,
                            showLabel: this.showLabel,
                            show3D: this.show3D,
                            isDonut: this.isDonut,
                            innerRadius: this.innerRadius,
                            customRadius: this.customRadius,
                        } }) }))] }));
    }
    renderEditUI() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this, label: "Label", propertyName: "label", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.TextField, { label: "Dataname", value: this.dataName, onChange: (e) => this.updateChartData(e), variant: "outlined" }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show Donut", propertyName: "isDonut", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.isDonut, children: (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Inner Radius", propertyName: "innerRadius", updateCallback: this.controlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { label: "Show Legend", options: ["No", "Top", "Bottom", "Left", "Right"], propertyName: "legendPosition", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { label: "Color Schema", options: ["Custom", "Random"], propertyName: "colorType", editObject: this, updateCallback: this.updateDataDefinition }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Custom Radius", propertyName: "customRadius", editObject: this, updateCallback: this.updateDataDefinition }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show 3D", propertyName: "show3D", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show Tooltip", propertyName: "showToolTip", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show Labels", propertyName: "showLabel", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Allow Actions", propertyName: "allowActions", editObject: this, updateCallback: this.controlUpdate })] }));
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "chartType", "innerRadius", "objectPath", "dataName", "label", "isDonut", "showLabel", "showToolTip", "show3D", "colorType", "legendPosition", "customRadius");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "chartType", "innerRadius", "objectPath", "dataName", "label", "isDonut", "showLabel", "showToolTip", "show3D", "colorType", "legendPosition", "customRadius");
    }
}
exports.PieChartFormControl = PieChartFormControl;
//# sourceMappingURL=PieChartFormControl.js.map