"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineChartFormControl = exports.ChartType = 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 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 PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const ChartSameple_1 = require("../Testing/ChartSameple");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
var ChartType;
(function (ChartType) {
    ChartType["BarChart"] = "BarChart";
    ChartType["LineChart"] = "LineChart";
})(ChartType = exports.ChartType || (exports.ChartType = {}));
class LineChartFormControl extends FormControl_1.FormControl {
    __type = "Line Chart";
    chartType;
    objectPath;
    dataName;
    labelName;
    valueName;
    randomColor;
    label;
    showLegend;
    legendPosition;
    show3D;
    // tooltip: boolean;
    cursor;
    exportable;
    multiValue;
    stackValue;
    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 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;
    }
    updateColor() {
        const dataDef = this.getFormContext()?.form.getInputDefinition();
        const chartDataDef = 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_1.StringDataDefinition("color");
            fields.push(colorDef);
        }
        this.controlUpdate();
    }
    updateChartData(e) {
        const value = e.target.value;
        const dataDef = this.getFormContext()?.form.getInputDefinition();
        if (this.dataName) {
            const chartDataDef = 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_1.StringDataDefinition("color");
                fields.push(colorDef);
            }
            Reflect.set(this, "dataName", value);
        }
        else {
            Reflect.set(this, "dataName", value);
            const chartDataDef = new ObjectDataDefinition_1.ObjectDataDefinition(value);
            chartDataDef.list = true;
            const labelDef = new StringDataDefinition_1.StringDataDefinition(this.labelName);
            const valueDef = new NumberDataDefinition_1.NumberDataDefinition(this.valueName);
            chartDataDef.fields.push(labelDef);
            chartDataDef.fields.push(valueDef);
            if (!this.randomColor) {
                const colorDef = new StringDataDefinition_1.StringDataDefinition("color");
                chartDataDef.fields.push(colorDef);
            }
            dataDef?.fields.push(chartDataDef);
        }
        this.controlUpdate();
    }
    getChartDefSampleValue() {
        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.map((dataItem) => {
            if (dataItem.color) {
                return {
                    label: dataItem.label,
                    value: dataItem.value,
                    color: dataItem.color,
                };
            }
            else {
                return {
                    label: dataItem.label,
                    value: dataItem.value,
                };
            }
        });
    }
    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.getChartDefSampleValue() && this.getChartDefSampleValue().length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UIChart_1.default, { 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,
                        } }) }))] }));
    }
    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)(PropertyEditorSelect_1.PropertyEditorSelect, { options: Object.keys(ChartType), propertyName: "chartType", editObject: this, label: "Chart Type", 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)(PropertyEditorText_1.PropertyEditorText, { editObject: this, label: "Value axis title", propertyName: "valueName", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this, label: "Label axis title", propertyName: "labelName", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show Legend", propertyName: "showLegend", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.showLegend, children: (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { label: "Legend Position", options: ["top", "bottom", "left", "right"], propertyName: "legendPosition", editObject: this, updateCallback: this.controlUpdate }) }), (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 Cursor", propertyName: "cursor", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Exportable", propertyName: "exportable", editObject: this, updateCallback: this.controlUpdate })] }));
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "chartType", "objectPath", "dataName", "labelName", "valueName", "randomColor", "label", "showLegend", "legendPosition", "show3D", "cursor", "exportable", "multiValue", "stackValue");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "chartType", "objectPath", "dataName", "labelName", "valueName", "randomColor", "label", "showLegend", "legendPosition", "show3D", "cursor", "exportable", "multiValue", "stackValue");
    }
}
exports.LineChartFormControl = LineChartFormControl;
//# sourceMappingURL=LineChartFormControl.js.map