"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumberFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const Tooltip_1 = tslib_1.__importDefault(require("@material-ui/core/Tooltip"));
const FormDesignConstants_1 = require("../../Utilities/FormDesignConstants");
const CommonStyled_1 = require("./CommonStyled");
const TextEntryFormControl_1 = require("../TextEntryFormControl");
const NumberDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/NumberDataDefinition");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const core_1 = require("@material-ui/core");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XNumberBoxEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "allowDecimals", label: "Allow Decimals", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    } }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.props.editMe.allowDecimals, children: (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "numberOfDecimalPlaces", label: "Number Of Decimal Places", updateCallback: () => {
                            this.props.editMe.controlUpdate();
                        } }) }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "separator", label: "Separators", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    } }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "min", label: "Min", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    }, decimal: this.props.editMe.allowDecimals }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "max", label: "Max", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    }, decimal: this.props.editMe.allowDecimals }), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }));
    }
}
class NumberFormControl extends TextEntryFormControl_1.TextEntryFormControl {
    __type = "Number";
    allowDecimals = false;
    numberOfDecimalPlaces = 2;
    min;
    max;
    separator = false;
    render() {
        let style = this.getFormContext()?.form?.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        let size = this.getFormContext()?.form?.defaultTextSize ?? "medium";
        if (this.overrideStyle && this.size)
            size = this.size;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "200px";
        switch (style) {
            case FormDesignConstants_1.TextControlStyle.LABELED:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, type: this.separator ? "text" : "number", variant: "outlined", value: this.getValue(), onChange: this.handleChange, "data-testid": this.valueName, fullWidth: this.fullWidth, width: customWidth, error: Boolean(issueText), InputProps: {
                                inputProps: {
                                    min: this.min,
                                    max: this.max,
                                    step: this.allowDecimals ? 1 / Math.pow(10, this.numberOfDecimalPlaces) : 1,
                                },
                                inputRef: this.ref,
                            } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.SHADED:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, type: this.separator ? "text" : "number", variant: "filled", customstyle: "filled", value: this.getValue(), onChange: this.handleChange, "data-testid": this.valueName, fullWidth: this.fullWidth, width: customWidth, error: Boolean(issueText), label: this.valueName, InputProps: {
                                inputProps: {
                                    min: this.min,
                                    max: this.max,
                                    step: this.allowDecimals ? 1 / Math.pow(10, this.numberOfDecimalPlaces) : 1,
                                },
                                inputRef: this.ref,
                            } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.UNDERLINED:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, type: this.separator ? "text" : "number", variant: "standard", customstyle: "standard", value: this.getValue(), onChange: this.handleChange, "data-testid": this.valueName, fullWidth: this.fullWidth, width: customWidth, error: Boolean(issueText), label: this.valueName, InputProps: {
                                inputProps: {
                                    min: this.min,
                                    max: this.max,
                                    step: this.allowDecimals ? 1 / Math.pow(10, this.numberOfDecimalPlaces) : 1,
                                },
                                inputRef: this.ref,
                            } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.OUTLINE:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, type: this.separator ? "text" : "number", variant: "outlined", customstyle: "outlined", value: this.getValue(), onChange: this.handleChange, "data-testid": this.valueName, fullWidth: this.fullWidth, width: customWidth, error: Boolean(issueText), label: this.valueName, InputProps: {
                                inputProps: {
                                    min: this.min,
                                    max: this.max,
                                    step: this.allowDecimals ? 1 / Math.pow(10, this.numberOfDecimalPlaces) : 1,
                                },
                                inputRef: this.ref,
                            } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
        }
    }
    getRuntimeValidationIssues() {
        const runtimeIssues = super.getRuntimeValidationIssues();
        const validationIssue = this.validate();
        if (validationIssue) {
            runtimeIssues.push(new IDesignValidationProvider_1.ValidationIssue(validationIssue, this.valueName, this.id));
        }
        return runtimeIssues;
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XNumberBoxEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new NumberDataDefinition_1.NumberDataDefinition();
        def.name = this.valueName;
        return def;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "allowDecimals", "numberOfDecimalPlaces", "min", "max", "separator");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "allowDecimals", "numberOfDecimalPlaces", "min", "max", "separator");
    }
    normalizedValue = (value) => {
        let newValue = value;
        if (!this.allowDecimals && value.includes(".")) {
            newValue = value.replace(".", "");
        }
        else if (this.allowDecimals) {
            // eslint-disable-next-line
            let [_, numberOfDecimalPlaces] = value.split(".");
            if (numberOfDecimalPlaces && numberOfDecimalPlaces.length > this.numberOfDecimalPlaces) {
                newValue = parseFloat(value).toFixed(this.numberOfDecimalPlaces);
            }
        }
        if (this.separator) {
            return Number(newValue).toLocaleString();
        }
        return newValue;
    };
    handleChange = (event) => {
        if (this.valueName) {
            let value = event.currentTarget.value.replace(/,/g, "");
            value = /^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(value) ? this.normalizedValue(value) : this.getValue();
            this.setFormDataValue(this.valueName, value);
        }
    };
    getValue = () => {
        return this.valueName ? this.getFormDataValue(this.valueName) || "" : "";
    };
    validate = () => {
        if (!this.min && !this.max)
            return null;
        let value = this.valueName ? this.getFormDataValue(this.valueName) : "";
        if (this.min && parseFloat(value) < this.min)
            return `Value should be larger than ${this.min}`;
        if (this.max && parseFloat(value) > this.max)
            return `Value should be smaller than ${this.max}`;
    };
}
exports.NumberFormControl = NumberFormControl;
//# sourceMappingURL=NumberFormControl.js.map