import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Tooltip from "@material-ui/core/Tooltip";
import { TextControlStyle } from "../FormDesignConstants";
import { StyledInputLabel, StyledFormHelperText } from "./XCommonStyled";
import { StyledTextField } from "./XCommonStyled";
import { BaseTextEntryControl } from "./BaseTextEntryControl";
import { NumberDataDefinition } from "../../Common/Data/Definitions/NumberDataDefinition";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { Collapse } from "@material-ui/core";
import { ValidationIssue } from "../../Common/IDesignValidationProvider";
class XNumberBoxEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "allowDecimals", label: "Allow Decimals", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    } }, void 0),
                _jsx(Collapse, Object.assign({ in: this.props.editMe.allowDecimals }, { children: _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "numberOfDecimalPlaces", label: "Number Of Decimal Places", updateCallback: () => {
                            this.props.editMe.controlUpdate();
                        } }, void 0) }), void 0),
                _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "separator", label: "Separators", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    } }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "min", label: "Min", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    }, decimal: this.props.editMe.allowDecimals }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "max", label: "Max", updateCallback: () => {
                        this.props.editMe.controlUpdate();
                    }, decimal: this.props.editMe.allowDecimals }, void 0), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }, void 0));
    }
}
export class XNumberBox extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.allowDecimals = false;
        this.numberOfDecimalPlaces = 2;
        this.separator = false;
        this.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;
        };
        this.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);
            }
        };
        this.getValue = () => {
            return this.valueName ? this.getFormDataValue(this.valueName) : "";
        };
        this.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}`;
        };
    }
    render() {
        var _a, _b, _c, _d, _e;
        let style = (_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        let size = (_e = (_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultTextSize) !== null && _e !== void 0 ? _e : "medium";
        if (this.overrideStyle && this.size)
            size = this.size;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || "";
        const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "200px";
        switch (style) {
            case TextControlStyle.LABELED:
                return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                        _jsx(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
                            } }, void 0),
                        issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
            case TextControlStyle.SHADED:
                return (_jsxs(_Fragment, { children: [_jsx(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
                            } }, void 0),
                        issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
            case TextControlStyle.UNDERLINED:
                return (_jsxs(_Fragment, { children: [_jsx(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
                            } }, void 0),
                        issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
            case TextControlStyle.OUTLINE:
                return (_jsxs(_Fragment, { children: [_jsx(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
                            } }, void 0),
                        issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "numberbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
        }
    }
    getRuntimeValidationIssues() {
        const runtimeIssues = super.getRuntimeValidationIssues();
        const validationIssue = this.validate();
        if (validationIssue) {
            runtimeIssues.push(new ValidationIssue(validationIssue, this.valueName, this.id));
        }
        return runtimeIssues;
    }
    renderEditUI() {
        return _jsx(XNumberBoxEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new NumberDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
//# sourceMappingURL=XNumberBox.js.map