import { library } from '@fortawesome/fontawesome-svg-core';
import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import { h } from "@stencil/core";
import { getInputCreator } from '../bce-input-creator/input-creator';
const ROW_SIZE = 19;
library.add(faEye, faEyeSlash);
export class Input {
    constructor() {
        this.disabled = false;
        this.type = 'text';
        // #endregion
        this.showPassword = false;
        this.hasHover = false;
        this._initialValue = this.value;
        this._inputCreator = getInputCreator(this, err => (this.error = !!err));
        this.handleBlur = () => {
            this.hasFocus = false;
            this._inputCreator.validate();
        };
        this.handleFocus = () => {
            this.hasFocus = true;
        };
        this.handleInput = (event) => {
            const input = event.target;
            if (input)
                this.value = input.value || '';
            this.resizeTextarea();
            this._inputCreator.handleInput();
        };
        this.handleShowPassword = () => {
            this.showPassword = !this.showPassword;
            const query = this.type === 'textarea' ? 'textarea' : 'input';
            this.el.shadowRoot.querySelector(query).focus();
        };
        this.resizeTextarea = () => {
            if (this.type !== 'textarea')
                return;
            const lines = Math.max(this.value ? this.value.split(/\r\n|\r|\n/).length : 0, this.rows || 0);
            const compact = this.compact || window.innerWidth < 1024;
            const min = compact ? 48 : 40;
            const padding = compact ? 10 + ROW_SIZE : ROW_SIZE;
            const size = lines * ROW_SIZE + padding;
            const height = Math.max(min, size);
            this.el.style.setProperty('height', height + 'px');
        };
    }
    get hover() {
        if (this.type === 'color' || this.type === 'date')
            return true;
        return this.hasFocus || !!this.placeholder || !!this.value;
    }
    async reset() {
        this.value = this._initialValue;
        this.showPassword = false;
        this._inputCreator.reset();
    }
    async validate(silent = false) {
        return this._inputCreator.validate(silent);
    }
    componentDidLoad() {
        this.resizeTextarea();
        this.el.addEventListener('mouseenter', () => (this.hasHover = true));
        this.el.addEventListener('mouseleave', () => (this.hasHover = false));
        window.addEventListener('resize', this.resizeTextarea);
    }
    componentDidUnload() {
        window.removeEventListener('resize', this.resizeTextarea);
    }
    renderIcon() {
        if (this.type !== 'password')
            return;
        return (h("bce-button", { design: "text", icon: this.showPassword ? 'far:eye' : 'far:eye-slash', tabIndex: -1, onClick: this.handleShowPassword, "data-hidden": !this.value || (!this.hasHover && !this.hasFocus) }));
    }
    render() {
        const InputCreator = this._inputCreator;
        const Input = this.type === 'textarea' ? 'textarea' : 'input';
        const type = this.showPassword ? 'text' : this.type;
        return (h(InputCreator, null,
            h(Input, { autocomplete: this.autocomplete, disabled: this.disabled, placeholder: this.placeholder, type: type, value: this.value, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, "aria-label": this.label, "data-hover": this.hover }),
            this.renderIcon()));
    }
    static get is() { return "bce-input"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-input.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-input.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": true
        },
        "compact": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "compact",
            "reflect": true
        },
        "error": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "error",
            "reflect": true
        },
        "hasFocus": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "focus",
            "reflect": true
        },
        "info": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "info",
            "reflect": true
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": true
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": true
        },
        "tooltip": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "tooltip",
            "reflect": false
        },
        "validation": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "validation",
            "reflect": true
        },
        "autocomplete": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "autocomplete",
            "reflect": true
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": true,
            "defaultValue": "false"
        },
        "placeholder": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "placeholder",
            "reflect": false
        },
        "rows": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "rows",
            "reflect": true
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "InputType",
                "resolved": "\"color\" | \"date\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"url\"",
                "references": {
                    "InputType": {
                        "location": "import",
                        "path": "../../models/input-type"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": true,
            "defaultValue": "'text'"
        },
        "value": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get states() { return {
        "showPassword": {},
        "hasHover": {}
    }; }
    static get methods() { return {
        "reset": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "validate": {
            "complexType": {
                "signature": "(silent?: boolean) => Promise<ValidatorError[]>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "ValidatorError": {
                        "location": "import",
                        "path": "../../utils/validator"
                    }
                },
                "return": "Promise<ValidatorError[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
