import { MDCFloatingLabel } from '@material/floating-label';
import { MDCLineRipple } from '@material/line-ripple';
import { MDCNotchedOutline } from '@material/notched-outline';
import { MDCTextField } from '@material/textfield';
import { MDCTextFieldHelperText } from '@material/textfield/helper-text';
import { h, Host } from '@stencil/core';
export class TextField {
    constructor() {
        /** Hide clear button (webkit + Edge, Moz not supported) */
        this.hideNativeClear = false;
        // Input
        this.type = 'text';
    }
    componentWillLoad() {
        if (!this.value) {
            this.value = '';
        }
    }
    async updateValue() {
        if (!this.value) {
            this.value = '';
            return;
        }
        if (this.mdcTextField) {
            this.mdcTextField.value = this.value;
            await this.forceValidation();
        }
    }
    componentDidLoad() {
        this.mdcTextField = new MDCTextField(this.textFieldEl);
        this.mdcTextField.useNativeValidation = false;
        if (this.label) {
            MDCFloatingLabel.attachTo(this.floatingLabelEl);
        }
        this.mdcTextFieldHelperText = new MDCTextFieldHelperText(this.helperTextEl);
        this.mdcTextFieldHelperText.foundation.setContent(this.helperText);
        this.mdcTextFieldHelperText.foundation.setPersistent(this.persistent);
        if (this.outlined) {
            MDCNotchedOutline.attachTo(this.notchedOutlineEl);
        }
        else {
            MDCLineRipple.attachTo(this.lineRippleEl);
        }
    }
    getClasses() {
        return {
            'mdc-text-field': true,
            'mdc-text-field--disabled': this.disabled,
            'mdc-text-field--fullwidth': this.fullwidth,
            'mdc-text-field--outlined': this.outlined,
            'mdc-text-field--focused': this.focused,
            'mdc-text-field--no-label': !this.label,
            'mdc-text-field--with-leading-icon': !!this.leadingIcon,
            'mdc-text-field--with-trailing-icon': !!this.trailingIcon
        };
    }
    getLabelClasses() {
        return {
            'mdc-floating-label': true
        };
    }
    async isValid() {
        const nativeValidation = this.inputEl.validity.valid;
        if (!nativeValidation) {
            return false;
        }
        if (this.customValidation) {
            return !(await this.customValidation());
        }
        return true;
    }
    async forceValidation() {
        const nativeValidation = this.inputEl.validity.valid;
        if (!nativeValidation) {
            this.mdcTextField.valid = false;
            this.mdcTextFieldHelperText.foundation.setContent(this.inputEl.validationMessage);
            this.mdcTextFieldHelperText.foundation.setValidation(true);
            this.realHelperText = this.inputEl.validationMessage;
            return;
        }
        if (this.customValidation) {
            const validatonMessage = await this.customValidation();
            if (validatonMessage) {
                this.mdcTextField.valid = false;
                this.mdcTextFieldHelperText.foundation.setContent(validatonMessage);
                this.mdcTextFieldHelperText.foundation.setValidation(true);
                this.realHelperText = validatonMessage;
                return;
            }
        }
        this.mdcTextField.valid = true;
        this.mdcTextFieldHelperText.foundation.setContent(this.helperText);
        this.mdcTextFieldHelperText.foundation.setValidation(false);
        this.realHelperText = this.helperText;
    }
    render() {
        return (h(Host, { class: { 'materials-text-field--dense': this.dense } },
            h("div", { style: { 'width': this.width + 'px' }, class: this.getClasses(), ref: mdcTextField => this.textFieldEl = mdcTextField },
                (() => {
                    return this.leadingIcon ? (h("i", { class: "material-icons mdc-text-field__icon", tabindex: "0", role: "button" }, this.leadingIcon)) : '';
                })(),
                h("input", { id: "my-text-field", class: { 'mdc-text-field__input': true, 'hide-native-clear': this.hideNativeClear, 'mdc-text-field--overflow-elipsis': this.overflow }, type: this.type, pattern: this.pattern, value: this.value, disabled: this.disabled, required: this.required, name: this.name, ref: el => this.inputEl = el, onInput: (ev) => {
                        this.value = ev.target.value;
                        this.input.emit(ev);
                    }, onChange: (ev) => this.change.emit(ev) }),
                this.trailingIcon && (h("i", { class: "material-icons mdc-text-field__icon", tabindex: "0", role: "button" }, this.trailingIcon)),
                this.outlined ?
                    h("div", { class: "mdc-notched-outline", ref: notchedOutlineEl => this.notchedOutlineEl = notchedOutlineEl },
                        h("div", { class: "mdc-notched-outline__leading" }),
                        h("div", { class: "mdc-notched-outline__notch" }, this.label && h("label", { class: this.getLabelClasses(), ref: el => this.floatingLabelEl = el }, this.label)),
                        h("div", { class: "mdc-notched-outline__trailing" }))
                    : this.label && h("label", { class: this.getLabelClasses(), ref: el => this.floatingLabelEl = el }, this.label),
                this.outlined ? '' : h("div", { class: "mdc-line-ripple", ref: el => this.lineRippleEl = el })),
            h("div", { class: "mdc-text-field-helper-line" },
                h("div", { id: "helper-text", class: { 'mdc-text-field-helper-text': true }, "aria-hidden": "true", ref: el => this.helperTextEl = el }))));
    }
    static get is() { return "materials-text-field"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["text-field.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["text-field.css"]
    }; }
    static get properties() { return {
        "fullwidth": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "fullwidth",
            "reflect": false
        },
        "dense": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "dense",
            "reflect": false
        },
        "outlined": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "outlined",
            "reflect": false
        },
        "focused": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "focused",
            "reflect": false
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false
        },
        "leadingIcon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "leading-icon",
            "reflect": false
        },
        "trailingIcon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "trailing-icon",
            "reflect": false
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false
        },
        "hideNativeClear": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Hide clear button (webkit + Edge, Moz not supported)"
            },
            "attribute": "hide-native-clear",
            "reflect": false,
            "defaultValue": "false"
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": false,
            "defaultValue": "'text'"
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "required",
            "reflect": false
        },
        "pattern": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "pattern",
            "reflect": false
        },
        "value": {
            "type": "any",
            "mutable": true,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": true
        },
        "width": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "width",
            "reflect": false
        },
        "overflow": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "overflow",
            "reflect": false
        },
        "helperText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "helper-text",
            "reflect": false
        },
        "persistent": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "persistent",
            "reflect": false
        },
        "customValidation": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "() => Promise<string>",
                "resolved": "() => Promise<string>",
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "realHelperText": {}
    }; }
    static get events() { return [{
            "method": "input",
            "name": "input",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "change",
            "name": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "isValid": {
            "complexType": {
                "signature": "() => Promise<boolean>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "forceValidation": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "host"; }
    static get watchers() { return [{
            "propName": "value",
            "methodName": "updateValue"
        }]; }
}
