"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BarChartFormControl = 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 PropertyEditorColor_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorColor");
const PropertyEditorFloat_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorFloat");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const icons_material_1 = require("@mui/icons-material");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class BarChartFormControl extends FormControl_1.FormControl {
    __type = "Bar Chart";
    label;
    chartType;
    dataName;
    allowSeries;
    seriesNames;
    stackBars;
    seriesDataType;
    xAxisLabel;
    yAxisLabel;
    showLegend;
    legendPosition;
    render3D;
    colorType;
    color;
    showXYAxis;
    allowActions;
    showTooltip;
    setLowerBounds;
    lowerBounds;
    setUpperBounds;
    upperBounds;
    numberFormatter;
    customNumberFormatter;
    cursor;
    showIncrements;
    increment;
    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 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 = null;
        chartDataDef = new ObjectDataDefinition_1.ObjectDataDefinition(this.dataName);
        if (!this.allowSeries) {
            chartDataDef.list = true;
            const labelDef = new StringDataDefinition_1.StringDataDefinition("label");
            const valueDef = new NumberDataDefinition_1.NumberDataDefinition("value");
            chartDataDef.fields.push(labelDef);
            chartDataDef.fields.push(valueDef);
            if (this.colorType === "Custom") {
                const colorDef = new StringDataDefinition_1.StringDataDefinition("color");
                chartDataDef.fields.push(colorDef);
            }
            return chartDataDef;
        }
        if (this.seriesDataType === "Nested") {
            chartDataDef.list = true;
            const labelDef = new StringDataDefinition_1.StringDataDefinition("label");
            chartDataDef.fields.push(labelDef);
            if (this.colorType === "Custom") {
                if (this.seriesNames) {
                    for (const series of this.seriesNames) {
                        const seriesDataDef = new ObjectDataDefinition_1.ObjectDataDefinition(series);
                        const valueDef = new NumberDataDefinition_1.NumberDataDefinition("value");
                        const colorDef = new StringDataDefinition_1.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_1.NumberDataDefinition(series);
                        chartDataDef.fields.push(seriesDataDef);
                    }
                }
            }
            return chartDataDef;
        }
        if (this.seriesNames) {
            for (const series of this.seriesNames) {
                const seriesDataDef = new ObjectDataDefinition_1.ObjectDataDefinition(series);
                seriesDataDef.list = true;
                const labelDef = new StringDataDefinition_1.StringDataDefinition("label");
                seriesDataDef.fields.push(labelDef);
                const valueDef = new NumberDataDefinition_1.NumberDataDefinition("value");
                seriesDataDef.fields.push(valueDef);
                if (this.colorType === "Custom") {
                    const colorDef = new StringDataDefinition_1.StringDataDefinition("color");
                    seriesDataDef.fields.push(colorDef);
                }
                chartDataDef.fields.push(seriesDataDef);
            }
        }
        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() {
        if (this.allowSeries) {
            if (this.seriesDataType === "Nested") {
                if (this.colorType === "Custom") {
                    return ChartSameple_1.chartNestedSeriesWithExtraData;
                }
                else {
                    return ChartSameple_1.chartNestedSeriesWithoutExtraData;
                }
            }
            else {
                return ChartSameple_1.chartNonNestSeries;
            }
        }
        return ChartSameple_1.chartNonSeries;
    }
    getChartData() {
        const dataDef = this.getFormContext()?.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() {
        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 || Object.keys(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(),
                            category: this.xAxisLabel,
                            value: this.yAxisLabel,
                            chartType: this.chartType,
                            allowSeries: this.allowSeries,
                            seriesNames: this.seriesNames,
                            legendPosition: this.legendPosition?.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),
                        } }) }))] }));
    }
    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: "Allow Series", propertyName: "allowSeries", editObject: this, updateCallback: this.updateDataDefinition }), (0, jsx_runtime_1.jsxs)(core_1.Collapse, { in: this.allowSeries, children: [(0, jsx_runtime_1.jsxs)(StyledContainer, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { children: "Series" }), this.seriesNames?.map((seriesName, key) => ((0, jsx_runtime_1.jsx)(core_1.TextField, { value: seriesName, onChange: (e) => {
                                        this.seriesNames[key] = e.target.value;
                                        this.updateDataDefinition();
                                    }, variant: "outlined", InputProps: {
                                        endAdornment: ((0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: () => {
                                                this.seriesNames?.splice(key, 1);
                                                this.updateDataDefinition();
                                            }, children: (0, jsx_runtime_1.jsx)(icons_material_1.RemoveCircleOutline, {}) })),
                                    } }, key))), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", color: "primary", onClick: () => {
                                        this.seriesNames.push("series_" + (this.seriesNames.length + 1));
                                        this.updateDataDefinition();
                                    }, children: "Add Series" })] }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Stacked", propertyName: "stackBars", editObject: this, updateCallback: this.updateDataDefinition }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { label: "Nested", options: ["Nested", "Non Nested"], propertyName: "seriesDataType", editObject: this, updateCallback: this.updateDataDefinition })] }), (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this, label: "X Axis Label", propertyName: "xAxisLabel", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this, label: "Y Axis Label", propertyName: "yAxisLabel", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Render 3D", propertyName: "render3D", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show X/Y Axis", propertyName: "showXYAxis", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Set Lower Bounds", propertyName: "setLowerBounds", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.setLowerBounds, children: (0, jsx_runtime_1.jsx)(PropertyEditorFloat_1.PropertyEditorFloat, { editObject: this, label: "Lower Bounds Value", propertyName: "lowerBounds", updateCallback: this.controlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Set Upper Bounds", propertyName: "setUpperBounds", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.setUpperBounds, children: (0, jsx_runtime_1.jsx)(PropertyEditorFloat_1.PropertyEditorFloat, { editObject: this, label: "Upper Bounds Value", propertyName: "upperBounds", updateCallback: this.controlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show Increaments Lines", propertyName: "showIncrements", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.showIncrements && this.setUpperBounds && this.setLowerBounds, children: (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.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 }) }), (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: "Number Formatter", options: ["Normal", "Currency", "BigNumber", "Byte", "Percent", "Custom"], propertyName: "numberFormatter", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.numberFormatter === "Custom", children: (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this, label: "Custom Number Formatter", propertyName: "customNumberFormatter", updateCallback: this.controlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { label: "Color Schema", options: ["Custom", "Mono", "Random"], propertyName: "colorType", editObject: this, updateCallback: this.updateDataDefinition }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.colorType === "Mono", children: (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { label: "Color", propertyName: "color", editObject: this, updateCallback: this.controlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Active Pointer", propertyName: "cursor", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Allow Actions", propertyName: "allowActions", editObject: this, updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show Tooltip", propertyName: "showTooltip", editObject: this, updateCallback: this.controlUpdate })] }));
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "label", "chartType", "dataName", "allowSeries", "seriesNames", "stackBars", "seriesDataType", "xAxisLabel", "yAxisLabel", "showLegend", "legendPosition", "render3D", "colorType", "color", "showXYAxis", "allowActions", "showTooltip", "setLowerBounds", "lowerBounds", "setUpperBounds", "upperBounds", "numberFormatter", "customNumberFormatter", "cursor", "showIncrements", "increment");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "label", "chartType", "dataName", "allowSeries", "seriesNames", "stackBars", "seriesDataType", "xAxisLabel", "yAxisLabel", "showLegend", "legendPosition", "render3D", "colorType", "color", "showXYAxis", "allowActions", "showTooltip", "setLowerBounds", "lowerBounds", "setUpperBounds", "upperBounds", "numberFormatter", "customNumberFormatter", "cursor", "showIncrements", "increment");
    }
}
exports.BarChartFormControl = BarChartFormControl;
const StyledContainer = (0, styled_components_1.default)(core_1.Box) `
    padding: 16px;
    border-radius: 4px;
    border: 1px solid lightgray;
`;
//# sourceMappingURL=BarChartFormControl.js.map