import { Host, h, } from "@stencil/core";
import { FormControlErrorText, FormControlHelpText } from "..";
import { input, inputDisabled, inputFocused, inputInvalid, label, inputAdornment } from "../../styles/parts";
import { formatCurrency } from "../../utils/utils";
export class FormControlMonetary {
    constructor() {
        this.isFocused = false;
        this.defaultValue = '0';
        this.formatRawValue = (value) => {
            // Remove everything from that is not a number.
            // This will parse out our display formatting as well as prevent users from entering non-numeric characters.
            const formattedValue = value.replace(/\D/g, '');
            return formattedValue;
        };
        this.formatDisplayValue = (value) => {
            return formatCurrency(+value, undefined, true);
        };
        this.updateInput = (newValue) => {
            const name = this.formControl.name;
            const formatRawValue = this.formatRawValue(newValue); // "100000"
            this.formControl.value = this.formatDisplayValue(formatRawValue); // "1,000.00"
            this.inputHandler(name, formatRawValue);
            this.formControlInput.emit({ name: name, value: formatRawValue });
        };
    }
    handleDefaultValueChange(newValue) {
        this.updateInput(newValue);
    }
    componentDidLoad() {
        this.updateInput(this.defaultValue);
    }
    get inputPart() {
        if (this.errorText) {
            return inputInvalid;
        }
        if (this.disabled) {
            return inputDisabled;
        }
        if (this.isFocused) {
            return inputFocused;
        }
        return input;
    }
    render() {
        return (h(Host, { key: '6b13b9d4871571ab80480c044b813f70db17a85b' }, h("div", { key: 'de33d4a9dc8c5b5048c8b95d9c860433cb488c7c', class: "form-group d-flex flex-column" }, h("label", { key: 'e243e257c45018233a948c880e4fb15676f1b776', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'c490aa1db17d5a181666631cd95c509dbb32aece', name: this.name, helpText: this.helpText }), h("div", { key: '69dd679301294e3c6a31ce0b880ec291ee6cf23e', class: "input-group" }, h("span", { key: '71ed3716a7ea67933950b2140db4552799968193', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'a1ddad4f875b56fde2d1a0054dd2cfe0c3797e0d', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                this.isFocused = false;
                this.formControlBlur.emit();
            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '6bce010df58a187981efcad682cdc54150422bd6', errorText: this.errorText, name: this.name }))));
    }
    static get is() { return "form-control-monetary"; }
    static get properties() {
        return {
            "name": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "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"
            },
            "inputHandler": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(name: string, value: string) => void",
                    "resolved": "(name: string, value: string) => void",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "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'"
            },
            "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"
            },
            "maxLength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-length"
            },
            "keyDownHandler": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event: any) => void",
                    "resolved": "(event: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "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"
            }
        };
    }
    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"
            }];
    }
}
