import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { logger } from "../../../global/utils/logger";
import { FormSelectValidation } from "./form-select-validation.enum";
import { FormSelectVariation } from "./form-select-variation.enum";
/**
 * @slot default - Should be an option element
 *
 * @enums FormSelectValidation - form-select-validation.enum
 * @enums FormSelectVariation - form-select-variation.enum
 * @swedishName Väljare
 */
export class FormSelect {
    constructor() {
        this.optionItems = [];
        this.dirty = false;
        this.touched = false;
        this.hasPlaceholder = false;
        this.afLabel = undefined;
        this.afAriaLabel = undefined;
        this.afRequired = undefined;
        this.afRequiredText = undefined;
        this.afPlaceholder = undefined;
        this.afAnnounceIfOptional = false;
        this.afAnnounceIfOptionalText = undefined;
        this.afId = randomIdGenerator('digi-form-select');
        this.afName = undefined;
        this.afDescription = undefined;
        this.value = undefined;
        this.afValue = undefined;
        this.afDisableValidation = undefined;
        this.afVariation = FormSelectVariation.MEDIUM;
        this.afValidation = FormSelectValidation.NEUTRAL;
        this.afValidationText = undefined;
        this.afStartSelected = undefined;
        this.afAutofocus = undefined;
    }
    onValueChanged(value) {
        this.afValue = value;
    }
    onAfValueChanged(value) {
        this.value = value;
    }
    getOptions() {
        this.checkIfPlaceholder();
        const options = this._observer.children;
        if (!options || options.length <= 0) {
            logger.warn(`The slot contains no option elements.`, this.hostElement);
            return;
        }
        this.optionItems = [...Array.from(options)]
            .filter((el) => el.tagName.toLowerCase() === 'option')
            .map((el) => {
            return {
                value: el['value'],
                text: el['text']
            };
        });
    }
    checkIfPlaceholder() {
        this.hasPlaceholder = !!this.afPlaceholder;
    }
    componentWillLoad() {
        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
    }
    componentDidLoad() {
        this.getOptions();
        this.afStartSelected &&
            (this.afValue = this.optionItems[this.afStartSelected].value);
        this.afOnReady.emit();
    }
    /**
     * Returnerar en referens till formulärkontrollelementet.
     * @en Returns a reference to the form control element.
     */
    async afMGetFormControlElement() {
        return this._select;
    }
    get cssModifiers() {
        return {
            'digi-form-select--small': this.afVariation === FormSelectVariation.SMALL,
            'digi-form-select--medium': this.afVariation === FormSelectVariation.MEDIUM,
            'digi-form-select--large': this.afVariation === FormSelectVariation.LARGE,
            'digi-form-select--neutral': this.afValidation === FormSelectValidation.NEUTRAL,
            'digi-form-select--success': this.afValidation === FormSelectValidation.SUCCESS,
            'digi-form-select--warning': this.afValidation === FormSelectValidation.WARNING,
            'digi-form-select--error': this.afValidation === FormSelectValidation.ERROR,
            'digi-form-select--empty': !this.afValue &&
                (!this.afValidation ||
                    this.afValidation === FormSelectValidation.NEUTRAL)
        };
    }
    changeHandler(e) {
        if (!this.dirty) {
            this.afOnDirty.emit(e);
            this.dirty = true;
        }
        this.value = this.afValue = e.target.value;
        this.afOnChange.emit(e);
    }
    selectHandler(e) {
        this.value = this.afValue = e.target.value;
        this.afOnSelect.emit(e);
    }
    focusHandler(e) {
        this.afOnFocus.emit(e);
    }
    focusoutHandler(e) {
        this.afOnFocusout.emit(e);
    }
    blurHandler(e) {
        this.afOnBlur.emit(e);
    }
    getSelectedItem(option) {
        return this.afValue == option.value;
    }
    showValidation() {
        return !this.afDisableValidation &&
            this.afValidation !== FormSelectValidation.NEUTRAL &&
            this.afValidationText
            ? true
            : false;
    }
    render() {
        return (h("div", { key: '80a55bf6bd6b4af2bd9b627380b281248c588c72', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '7b4849173af16a76dd2eb26b3e1f4bbde0cf826c', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'dab265a62975bb57f2bdc737c5dff4a59fdac520', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'd02678669ea22fa207afe1747ed966afaf1b92b6', class: "digi-form-select__select-wrapper" }, h("select", { key: 'a626ce1764ce18e00dce72418e80fd5a1d7f75bf', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
                ? 'true'
                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '8ccfa77da6aa2e0dbaca7b86e0a340b487bf158e', class: {
                'digi-form-select__select-option': true,
                'digi-form-select__select-option--initial-value': true
            }, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index) => {
            return (h("option", { key: index, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
        })), h("digi-icon-input-select-marker", { key: 'a15c495ace06a9f481475298613fb837a56def0a', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '9ceec78033739588b36efe26a0f3f44ca8eaff71', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
                e.stopImmediatePropagation();
                this.getOptions();
            } }, h("slot", { key: 'c986f11387f56a9cd84fa4b75acab4d464196aa3' })), h("div", { key: '004060a10582489279f19b5bcd3d7eb609b8bb68', class: "digi-form-select__footer" }, h("div", { key: 'e674cef46f813cba112998408d54a9c1c3e2bd60', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '4e1e2eb4cce1dcfa5e3bf506c84e9eaf4bde744f', "af-variation": this.afValidation }, this.afValidationText))))));
    }
    static get is() { return "digi-form-select"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-select.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-select.css"]
        };
    }
    static get properties() {
        return {
            "afLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets a label for select."
                        }],
                    "text": "S\u00E4tter en text f\u00F6r select."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-label",
                "reflect": false
            },
            "afAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets a screen reader label for select."
                        }],
                    "text": "S\u00E4tter en sk\u00E4rml\u00E4sartext f\u00F6r select."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-label",
                "reflect": false
            },
            "afRequired": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Is the associated field required?"
                        }],
                    "text": "\u00C4r det ihopkopplade f\u00E4ltet tvingat?"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-required",
                "reflect": false
            },
            "afRequiredText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set text for afRequired."
                        }],
                    "text": "S\u00E4tter text f\u00F6r afRequired."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-required-text",
                "reflect": false
            },
            "afPlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "A placeholder for the select"
                        }],
                    "text": "En platsh\u00E5llare f\u00F6r v\u00E4ljaren"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-placeholder",
                "reflect": false
            },
            "afAnnounceIfOptional": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Normally a required field is visually and semantically emphasized.\nThis flips that and emphasizes the field if it is not required.\nSet this to true if your form contains more required fields than not."
                        }],
                    "text": "Normalt betonas ett obligatoriskt f\u00E4lt visuellt och semantiskt.\nDetta v\u00E4nder p\u00E5 det och betonar f\u00E4ltet om det inte kr\u00E4vs.\nSt\u00E4ll in detta till sant om ditt formul\u00E4r inneh\u00E5ller fler obligatoriska f\u00E4lt \u00E4n inte."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-announce-if-optional",
                "reflect": false,
                "defaultValue": "false"
            },
            "afAnnounceIfOptionalText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set text for afAnnounceIfOptional."
                        }],
                    "text": "S\u00E4tter text f\u00F6r afAnnounceIfOptional."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-announce-if-optional-text",
                "reflect": false
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets an id attribute. Standard \u00E4r slumpm\u00E4ssig str\u00E4ng."
                        }],
                    "text": "S\u00E4tter ett id attribut."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-form-select')"
            },
            "afName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the select name."
                        }],
                    "text": "S\u00E4tter v\u00E4ljarens namn."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-name",
                "reflect": false
            },
            "afDescription": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "An optional description text."
                        }],
                    "text": "En valfri beskrivningstext."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-description",
                "reflect": false
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input value attribute"
                        }, {
                            "name": "ignore",
                            "text": undefined
                        }],
                    "text": "S\u00E4tter attributet 'value'"
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false
            },
            "afValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input value attribute"
                        }],
                    "text": "S\u00E4tter attributet 'value'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-value",
                "reflect": false
            },
            "afDisableValidation": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Disables the validation."
                        }],
                    "text": "Inaktiverar valideringen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-disable-validation",
                "reflect": false
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FormSelectVariation",
                    "resolved": "FormSelectVariation.LARGE | FormSelectVariation.MEDIUM | FormSelectVariation.SMALL",
                    "references": {
                        "FormSelectVariation": {
                            "location": "import",
                            "path": "./form-select-variation.enum",
                            "id": "src/components/_form/form-select/form-select-variation.enum.ts::FormSelectVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set select input size."
                        }],
                    "text": "S\u00E4tter v\u00E4ljarens storlek."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "FormSelectVariation.MEDIUM"
            },
            "afValidation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FormSelectValidation",
                    "resolved": "FormSelectValidation.ERROR | FormSelectValidation.NEUTRAL | FormSelectValidation.SUCCESS | FormSelectValidation.WARNING",
                    "references": {
                        "FormSelectValidation": {
                            "location": "import",
                            "path": "./form-select-validation.enum",
                            "id": "src/components/_form/form-select/form-select-validation.enum.ts::FormSelectValidation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set select validation"
                        }],
                    "text": "S\u00E4tter v\u00E4ljarens validering"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-validation",
                "reflect": false,
                "defaultValue": "FormSelectValidation.NEUTRAL"
            },
            "afValidationText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the validation text."
                        }],
                    "text": "S\u00E4tter valideringstexten."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-validation-text",
                "reflect": false
            },
            "afStartSelected": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Anv\u00E4nd afValue ist\u00E4llet"
                        }, {
                            "name": "en",
                            "text": "Sets initial selected value."
                        }],
                    "text": "S\u00E4tter ett f\u00F6rvalt v\u00E4rde."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-start-selected",
                "reflect": false
            },
            "afAutofocus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input autofocus attribute"
                        }],
                    "text": "S\u00E4tter attributet 'autofocus'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-autofocus",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "optionItems": {},
            "dirty": {},
            "touched": {},
            "hasPlaceholder": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnChange",
                "name": "afOnChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnSelect",
                "name": "afOnSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnFocus",
                "name": "afOnFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnFocusout",
                "name": "afOnFocusout",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnBlur",
                "name": "afOnBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnDirty",
                "name": "afOnDirty",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "First time the select element is changed."
                        }],
                    "text": "Sker f\u00F6rsta g\u00E5ngen v\u00E4ljarelementet \u00E4ndras."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnReady",
                "name": "afOnReady",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When the component and slots are loaded and initialized this event will trigger."
                        }],
                    "text": "N\u00E4r komponenten och slotsen \u00E4r laddade och initierade s\u00E5 skickas detta eventet."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "afMGetFormControlElement": {
                "complexType": {
                    "signature": "() => Promise<HTMLSelectElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLSelectElement": {
                            "location": "global",
                            "id": "global::HTMLSelectElement"
                        }
                    },
                    "return": "Promise<HTMLSelectElement>"
                },
                "docs": {
                    "text": "Returnerar en referens till formul\u00E4rkontrollelementet.",
                    "tags": [{
                            "name": "en",
                            "text": "Returns a reference to the form control element."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "onValueChanged"
            }, {
                "propName": "afValue",
                "methodName": "onAfValueChanged"
            }];
    }
}
