/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { Host, h } from "@stencil/core";
import cn from "../../global/lib/cn";
import { getInputLocalization } from "../../features/form-hook/index";
import { FormInputLabel } from "./components/form-input-label";
import { FormInputPrefix } from "./components/form-input-prefix";
import { FormErrorMessage } from "./components/form-error-message";
const partKeyPrefix = 'form-input-';
export class FormInput {
    constructor() {
        this.inputProps = {};
        this.localization = {};
        this.iconPosition = 'end';
        this.prefixWidth = 0;
        this.onInputChange = (event) => {
            const target = event.target;
            target.value = this.formatter ? this.formatter(target.value) : target.value;
        };
    }
    async componentWillLoad() {
        this.form.subscribe(this.name, this);
        this.onStaticValueChange(this.staticValue, false);
    }
    async onStaticValueChange(newStaticValue, notInitialLoad = true) {
        if (!!newStaticValue) {
            const formatted = this.formatter ? this.formatter(newStaticValue) : newStaticValue;
            this.defaultValue = formatted;
            this.inputRef.value = formatted;
        }
        else if (notInitialLoad) {
            this.defaultValue = '';
            this.inputRef.value = '';
        }
    }
    async componentDidLoad() {
        const prefix = this.el.getElementsByClassName('prefix')[0];
        this.prefixWidth = prefix ? prefix.getBoundingClientRect().width : 0;
        this.inputRef = this.el.getElementsByClassName(partKeyPrefix + this.name)[0];
    }
    async disconnectedCallback() {
        this.form.unsubscribe(this.name);
    }
    reset(newValue) {
        const value = newValue || this.defaultValue || '';
        this.inputRef.value = this.formatter ? this.formatter(value) : value;
    }
    render() {
        var _a, _b;
        const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
        const [locale] = this.form.getFormLocale();
        const part = partKeyPrefix + this.name;
        const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
        const isRtl = ((_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.direction) === 'rtl';
        const isIconStart = this.iconPosition === 'start';
        const iconPaddingSide = isIconStart ? (isRtl ? 'paddingRight' : 'paddingLeft') : isRtl ? 'paddingLeft' : 'paddingRight';
        const iconClass = cn('form-input-icon', {
            'form-input-icon-start': isIconStart,
            'form-input-icon-end': !isIconStart,
            'form-input-icon-interactive': !!this.iconAction,
        });
        const renderIcon = () => this.iconAction ? (h("button", { type: "button", disabled: isDisabled, onClick: this.iconAction, part: `${this.name}-icon form-input-icon`, class: iconClass }, this.icon)) : (h("span", { part: `${this.name}-icon form-input-icon`, class: iconClass }, this.icon));
        const { label, placeholder, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
        return (h(Host, { key: '141525d80cc4581ea2ec8e6ee52fa70b7d6cca1d', translate: "no" }, h("label", { key: '2976b30509c698aa9926ae7641437fd2f1f4dbf8', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'f984c0504960e6a345cfa5fe75f17b59e6f74c50', isRequired: isRequired, label: label }), h("div", { key: '3c1c364099141af44be7811bb3f7034a00d46a87', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: 'bd3b21429000794a8377588c641326dd577f62fa', name: this.name, direction: (_b = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _b === void 0 ? void 0 : _b.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: 'bd3a448ea53bfc66128f9b86920642267ef49c69', name: this.name, type: this === null || this === void 0 ? void 0 : this.type, disabled: isDisabled, onInput: this.onInputChange, defaultValue: this.formatter ? this.formatter(this.defaultValue || '') : this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign(Object.assign({}, (this.prefixWidth ? { [isRtl ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), (this.icon ? { [iconPaddingSide]: '40px' } : {})), class: cn('form-input-style', part, {
                'form-input-error-style': isError,
            }) }, this.inputProps)), this.icon && renderIcon()), h(FormErrorMessage, { key: 'de5250e0b95d14c5a2206ae81413686547efebf2', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
    }
    static get is() { return "form-input"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-inputs.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-inputs.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "wrapperId": {
                "type": "string",
                "attribute": "wrapper-id",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "isLoading": {
                "type": "boolean",
                "attribute": "is-loading",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "isDisabled": {
                "type": "boolean",
                "attribute": "is-disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "form": {
                "type": "unknown",
                "attribute": "form",
                "mutable": false,
                "complexType": {
                    "original": "FormHook<any>",
                    "resolved": "FormHook<any>",
                    "references": {
                        "FormHook": {
                            "location": "import",
                            "path": "~features/form-hook/form-hook",
                            "id": "src/features/form-hook/form-hook.ts::FormHook"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "inputPrefix": {
                "type": "string",
                "attribute": "input-prefix",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "wrapperClass": {
                "type": "string",
                "attribute": "wrapper-class",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "staticValue": {
                "type": "string",
                "attribute": "static-value",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "inputProps": {
                "type": "any",
                "attribute": "input-props",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "{}"
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "HTMLInputElement['type']",
                    "resolved": "string",
                    "references": {
                        "HTMLInputElement": {
                            "location": "global",
                            "id": "global::HTMLInputElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "defaultValue": {
                "type": "string",
                "attribute": "default-value",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "formatter": {
                "type": "unknown",
                "attribute": "formatter",
                "mutable": false,
                "complexType": {
                    "original": "(value: string) => string",
                    "resolved": "(value: string) => string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "localization": {
                "type": "unknown",
                "attribute": "localization",
                "mutable": false,
                "complexType": {
                    "original": "FormInputLocalization",
                    "resolved": "{ [lang: string]: { label?: string; placeholder?: string; require?: string; format?: string; minMessage: string; maxMessage: string; betweenMessage: string; }; }",
                    "references": {
                        "FormInputLocalization": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::FormInputLocalization"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{}"
            },
            "icon": {
                "type": "any",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "iconAction": {
                "type": "unknown",
                "attribute": "icon-action",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "iconPosition": {
                "type": "string",
                "attribute": "icon-position",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'end'",
                    "resolved": "\"end\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'end'"
            }
        };
    }
    static get states() {
        return {
            "prefixWidth": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "staticValue",
                "methodName": "onStaticValueChange"
            }];
    }
}
