import { Host, h } from "@stencil/core";
import { Lang } from "../../services/lang";
import IMask from "imask";
import { cls } from "../../utils/helpers";
export class XQuantity {
    constructor() {
        this.name = undefined;
        this.min = undefined;
        this.max = undefined;
        this.value = 1;
        this.required = undefined;
        this.number = undefined;
        this.isValid = true;
        this.isDisabled = undefined;
    }
    /**
     * Watch changes in value property
     */
    watchValue(value) {
        var _a;
        this.number = typeof value === 'number' ? value : parseInt(value);
        this.internals.setFormValue(this.number.toString());
        this.el.dispatchEvent(new InputEvent('input', { bubbles: false }));
        this.formValidateCallback(true);
        (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new InputEvent('input', { bubbles: false }));
    }
    /**
     * This is called when the 'disabled' attribute of the element or or an ancestor <fieldset> is updated
     *
     * @param disabled
     */
    formDisabledCallback(disabled) {
        this.isDisabled = disabled;
    }
    /**
     * This is called when the parent/owner form is reset
     */
    formResetCallback() {
        this.isValid = true;
        this.value = 0;
    }
    /**
     * This is called when the input is validated
     */
    formValidateCallback(dispatchValidation) {
        if (this.required && Number.isNaN(this.value)) {
            this.internals.setValidity({ valueMissing: true }, Lang.get('fields.validation.value-missing'));
        }
        else if (!Number.isNaN(this.max) && this.value > this.max) {
            this.internals.setValidity({ rangeOverflow: true }, Lang.get('fields.validation.range-overflow', { max: this.max }));
        }
        else if (!Number.isNaN(this.min) && this.value < this.min) {
            this.internals.setValidity({ rangeUnderflow: true }, Lang.get('fields.validation.range-underflow', { min: this.min }));
        }
        else {
            this.internals.setValidity({});
        }
        if (dispatchValidation) {
            this.isValid = this.internals.validity.valid;
            this.onValidateInputEvent.emit(this.internals);
        }
    }
    /**
     * On component will load action
     */
    componentWillLoad() {
        if (this.min && this.min > this.value) {
            this.value = this.min;
        }
        this.number = this.value;
    }
    /**
     * This is called on component did load
     */
    componentDidLoad() {
        IMask(this.input, { mask: Number });
        setTimeout(() => this.formValidateCallback(), 0);
    }
    /**
     * This called on input field is unfocused
     */
    onBlurInput() {
        setTimeout(() => this.formValidateCallback(true), 50);
    }
    /**
     * On element change input value
     *
     * @param event
     */
    handleChange(event) {
        const input = event.target;
        this.value = parseInt(input.value);
    }
    /**
     * Increment number value
     *
     * @returns
     */
    onPlusClick() {
        if (!Number.isNaN(this.number) && this.number + 1 > this.max) {
            return;
        }
        this.number++;
        this.value = this.number;
        this.onSumInputEvent.emit(this.number);
    }
    /**
     * Decrement number value
     *
     * @returns
     */
    onMinusClick() {
        if (!Number.isNaN(this.number) && this.number - 1 < this.min) {
            return;
        }
        this.number--;
        this.value = this.number;
        this.onSubInputEvent.emit(this.number);
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'd7f7edcfcda8197101484dce6ed797dd03e868d4', class: cls({
                'invalid': !this.isValid,
                'disabled': this.isDisabled,
                'required': this.required,
            }), "data-for": this.name }, h("x-chip", { key: '104713aaa7a8bf74adc8ca364bb7395ee0e358d8', hoverable: true }, h("x-button", { key: '5922991128250e2f4226e0d307bc9b00c5af232c', icon: "plus", tabindex: "-1", onClick: this.onPlusClick.bind(this) }), h("input", { key: '7d3acbda8e80a2ce96a9c1440b7b69ecb7956e47', ref: el => this.input = el, min: this.min, max: this.max, required: this.required, inputMode: "numeric", value: this.number, onInput: (e) => this.handleChange(e) }), h("x-button", { key: 'c3d45c2406d6d752455c0b3047576fdc1e7ae191', icon: "minus", tabindex: "-1", onClick: this.onMinusClick.bind(this) })));
    }
    static get is() { return "x-quantity"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input name for forms keys"
                },
                "attribute": "name",
                "reflect": false
            },
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element minimal number limit, default is 0"
                },
                "attribute": "min",
                "reflect": false
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element maximun number limit,default is infinite"
                },
                "attribute": "max",
                "reflect": false
            },
            "value": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element initial input value"
                },
                "attribute": "value",
                "reflect": true,
                "defaultValue": "1"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element input required for forms validations"
                },
                "attribute": "required",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "number": {},
            "isValid": {},
            "isDisabled": {}
        };
    }
    static get events() {
        return [{
                "method": "onSubInputEvent",
                "name": "sub",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Substraction event button click"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "onSumInputEvent",
                "name": "sum",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Sumarize event button click"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "onValidateInputEvent",
                "name": "validated",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On validate input event"
                },
                "complexType": {
                    "original": "ElementInternals",
                    "resolved": "ElementInternals",
                    "references": {
                        "ElementInternals": {
                            "location": "global",
                            "id": "global::ElementInternals"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "watchValue"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
