import { Host, h, } from "@stencil/core";
import IMask from "imask";
import { CURRENCY_MASK } from "../../../utils/form-input-masks";
import { FormControlErrorText, FormControlHelpText } from "../../../ui-components";
import { inputAdornment, inputDisabled, inputFocused, inputGroup, inputInvalid, label } from "../../../styles/parts";
export class FormControlMonetaryProvisioning {
    constructor() {
        this.imask = null;
        this.isFocused = false;
        this.errorText = '';
        this.defaultValue = '0';
        this.inputHandler = () => { };
        this.maskOptions = CURRENCY_MASK.DECIMAL;
        this.disabled = false;
        this.initializeIMask = () => {
            if (!this.textInput)
                return;
            this.imask = IMask(this.textInput, this.maskOptions);
            this.imask.on('accept', () => {
                const rawValue = this.imask.unmaskedValue;
                this.inputHandler(this.name, rawValue);
                this.formControlInput.emit({ name: this.name, value: rawValue });
            });
            this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
        };
        this.handleFormControlInput = (event) => {
            const target = event.target;
            const name = target.getAttribute('name');
            const rawValue = this.imask.unmaskedValue;
            this.formControlInput.emit({ name: name, value: rawValue });
        };
        this.updateInput = (newValue) => {
            if (this.imask) {
                this.imask.value = String(newValue);
            }
        };
    }
    handleDefaultValueChange(newValue) {
        this.updateInput(newValue);
    }
    componentDidLoad() {
        this.initializeIMask();
        this.updateInput(this.defaultValue);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
    }
    get inputPart() {
        let part = inputGroup;
        if (this.errorText) {
            part = inputInvalid;
        }
        if (this.disabled) {
            part = inputDisabled;
        }
        if (this.isFocused) {
            part = inputFocused;
        }
        return part;
    }
    render() {
        return (h(Host, { key: '8ecc68592c7e6ef4418301935dde43e4ea10404d' }, h("div", { key: 'ba267bd049287c297aa67b761214b9d60503e605', class: "form-group d-flex flex-column" }, h("label", { key: 'b020e228d70145d758bf58298914ed2b3384bbbc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '08415f471180958426563cf0e47e016b292108c7', class: "input-group" }, h("span", { key: 'dc22d1181a2a23e77003ee67212e724e48c2201e', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '3cdedc0317df58360601186dd744bcb721a68ec7', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                this.isFocused = false;
                this.formControlBlur.emit();
            }, onInput: this.handleFormControlInput, part: this.inputPart, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '1315bdeefe7a551fbbb30680d289743a22a3792d', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '7212797f21917530b6bb093f146f1ebead4c232b', errorText: this.errorText, name: this.name }))));
    }
    static get is() { return "form-control-monetary-provisioning"; }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "helpText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "help-text"
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error-text",
                "defaultValue": "''"
            },
            "defaultValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-value",
                "defaultValue": "'0'"
            },
            "inputHandler": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(name: string, value: string) => void",
                    "resolved": "(name: string, value: string) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => { }"
            },
            "maskOptions": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "mask-options",
                "defaultValue": "CURRENCY_MASK.DECIMAL"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isFocused": {}
        };
    }
    static get events() {
        return [{
                "method": "formControlInput",
                "name": "formControlInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "formControlBlur",
                "name": "formControlBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "defaultValue",
                "methodName": "handleDefaultValueChange"
            }];
    }
}
