import { MDCNotchedOutline } from '@material/notched-outline';
import { MDCSelect, MDCSelectHelperText } from '@material/select';
import { h } from '@stencil/core';
// TODO: gestion des tags <optgroup label="">
/**
 * Using the floating label as the placeholder
 * By default, <select> elements will select their first enabled option.
 * In order to initially display a placeholder instead,
 * add an initial <option> element with the disabled
 *  and selected attributes set, and with value set to "".
 */
/**
 * Select with pre-selected option
 * When dealing with a select component that has a pre-selected value,
 * include the mdc-floating-label--float-above modifier class
 *  on the mdc-floating-label element
 */
export class Select {
    async componentDidLoad() {
        await this.initMdcSelect();
    }
    async componentDidUnload() {
        this.destroyMdc();
    }
    async watchOptions() {
        this.destroyMdc();
        await this.initMdcSelect();
    }
    async watchValue() {
        if (this.mdcSelect) {
            this.mdcSelect.value = this.value ? this.value : '';
            await this.forceValidation();
        }
    }
    async watchDisabled() {
        if (this.mdcSelect) {
            this.mdcSelect.disabled = this.disabled;
            await this.forceValidation();
        }
    }
    async isValid() {
        const nativeValidation = this.selectTagEl.validity.valid;
        if (!nativeValidation) {
            return false;
        }
        if (this.customValidation) {
            return !(await this.customValidation());
        }
        return true;
    }
    async forceValidation() {
        const nativeValidation = this.selectTagEl.validity.valid;
        if (!nativeValidation) {
            this.mdcSelect.valid = false;
            this.mdcHelperText.foundation.setContent(this.selectTagEl.validationMessage);
            this.mdcHelperText.foundation.setValidation(true);
            this.realHelperText = this.selectTagEl.validationMessage;
            return;
        }
        if (this.customValidation) {
            const validatonMessage = await this.customValidation();
            if (validatonMessage) {
                this.mdcSelect.valid = false;
                this.mdcHelperText.foundation.setContent(validatonMessage);
                this.mdcHelperText.foundation.setValidation(true);
                this.realHelperText = validatonMessage;
                return;
            }
        }
        this.mdcSelect.valid = true;
        this.mdcHelperText.foundation.setContent(this.helperText);
        this.mdcHelperText.foundation.setValidation(false);
        this.realHelperText = '';
    }
    getClasses() {
        return {
            'materials-select': true,
            'mdc-select': true,
            'mdc-select--box': this.box,
            'mdc-select--disabled': this.disabled,
            'mdc-select--outlined': this.outlined,
            'mdc-select--with-leading-icon': !!this.leadingIcon,
            'materials-select--dense': this.dense
        };
    }
    getLabelClass() {
        return {
            'mdc-floating-label': true,
        };
    }
    async initMdcSelect() {
        const optionNodesList = this.host.querySelectorAll('option');
        Array.from(optionNodesList).forEach((el) => {
            this.selectTagEl.appendChild(el);
        });
        this.mdcSelect = new MDCSelect(this.selectEl);
        this.mdcHelperText = new MDCSelectHelperText(this.host.shadowRoot.querySelector('.mdc-select-helper-text'));
        this.mdcHelperText.foundation.setContent(this.helperText);
        await this.forceValidation();
        if (this.outlined) {
            this.mdcNotchedOutline = MDCNotchedOutline.attachTo(this.notchedOutlineEl);
        }
    }
    destroyMdc() {
        this.mdcSelect.destroy();
        if (this.mdcNotchedOutline) {
            this.mdcNotchedOutline.destroy();
        }
    }
    render() {
        return ([
            h("div", { style: { 'width': this.width }, class: this.getClasses(), ref: el => this.selectEl = el },
                this.leadingIcon && h("i", { class: "material-icons mdc-select__icon", tabindex: "0", role: "button" }, this.leadingIcon),
                h("i", { class: "mdc-select__dropdown-icon" }),
                h("select", { class: "mdc-select__native-control", onChange: (ev) => {
                        this.value = this.mdcSelect.value;
                        this.change.emit(ev);
                    }, name: this.name, disabled: this.disabled, ref: el => this.selectTagEl = el, required: this.required },
                    this.defaultEmpty && h("option", { value: "", selected: !this.value, disabled: this.required }, "\u00A0"),
                    this.options && Array.from(this.options.keys()).map(optionValue => h("option", { value: optionValue, selected: optionValue === this.value }, this.options.get(optionValue))),
                    h("slot", null)),
                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" },
                            h("label", { class: this.getLabelClass() },
                                this.label,
                                this.required)),
                        h("div", { class: "mdc-notched-outline__trailing" }))
                    :
                        h("label", { class: this.getLabelClass() },
                            this.label,
                            this.required),
                this.outlined ? '' : h("div", { class: "mdc-line-ripple" })),
            h("p", { class: "mdc-select-helper-text", "aria-hidden": "true" })
        ]);
    }
    static get is() { return "materials-select"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["select.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["select.css"]
    }; }
    static get properties() { return {
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false
        },
        "box": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "box",
            "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
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "required",
            "reflect": false
        },
        "defaultEmpty": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "default-empty",
            "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
        },
        "width": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "width",
            "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
        },
        "helperText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "helper-text",
            "reflect": false
        },
        "value": {
            "type": "any",
            "mutable": true,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": true
        },
        "customValidation": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "() => Promise<string>",
                "resolved": "() => Promise<string>",
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "options": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Map<string | number | string[], string>",
                "resolved": "Map<string | number | string[], string>",
                "references": {
                    "Map": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "realHelperText": {}
    }; }
    static get events() { return [{
            "method": "select",
            "name": "select",
            "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": "options",
            "methodName": "watchOptions"
        }, {
            "propName": "value",
            "methodName": "watchValue"
        }, {
            "propName": "disabled",
            "methodName": "watchDisabled"
        }]; }
}
