import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
/**
 * @slot icon - Ska vara en ikon-komponent
 * @slot badge - Ska vara en notifikationsindikator (digi-badge-notification)
 * @swedishName Vertikalt menyval
 */
export class NavigationVerticalMenuItem {
    constructor() {
        this.hasSubnav = false;
        this.hasIcon = false;
        this.hasBadge = false;
        this.isActive = undefined;
        this.activeSubnav = undefined;
        this.listItems = [];
        this.afText = undefined;
        this.afHref = undefined;
        this.afAriaCurrent = undefined;
        this.afActiveSubnav = undefined;
        this.afActive = false;
        this.afId = randomIdGenerator('digi-navigation-vertical-menu-item');
        this.afOverrideLink = false;
        this.afHasSubnav = false;
        this.afLang = 'sv';
    }
    componentWillLoad() {
        this.activeSubnav = this.afActiveSubnav;
    }
    componentDidLoad() {
        this.setSubnav();
        this.setHasIcon();
        this.setHasBadge();
        this.setHasSubnav();
        this.setIsActive();
    }
    componentWillUpdate() {
        this.setSubnav();
        this.setHasIcon();
        this.setHasBadge();
        this.setHasSubnav();
    }
    setHasSubnav() {
        var _a, _b;
        this.hasSubnav = this.activeSubnav !== undefined;
        if (this.hasSubnav) {
            if (this.$subnav) {
                this.$subnav.hidden = !this.activeSubnav;
            }
            this.activeSubnav
                ? (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.classList.add('digi-navigation-vertical-menu__item--active')
                : (_b = this.$parent) === null || _b === void 0 ? void 0 : _b.classList.remove('digi-navigation-vertical-menu__item--active');
        }
    }
    onAfActiveSubnavChanged(newValue) {
        this.activeSubnav = newValue;
        this.setHasSubnav();
    }
    setIsActive() {
        this.isActive = this.afActive;
        this.isActive
            ? this.hostElement.parentElement.classList.add('active')
            : this.hostElement.parentElement.classList.remove('active');
    }
    setSubnav() {
        if (this.hasSubnav) {
            this.$subnav = this.hostElement.parentElement.querySelector('ul');
            this.$parent = this.hostElement.parentElement;
            // Check if UL-element exist or is rendered later dynamically
            if (this.$subnav) {
                this.$subnav.setAttribute('id', `${this.afId}-collapse-menu`);
            }
        }
    }
    setHasIcon() {
        const icon = !!this.hostElement.querySelector('[slot="icon"]');
        this.hasIcon = icon;
    }
    setHasBadge() {
        const badge = !!this.hostElement.querySelector('[slot="badge"]');
        this.hasBadge = badge;
    }
    clickHandler(e) {
        const el = e.target;
        if (el.tagName.toLowerCase() === 'a') {
            if (this.afOverrideLink) {
                e.preventDefault();
            }
            if (el.classList.contains('digi-navigation-vertical-menu-item__has-subnav')) {
                this.activeSubnav = true;
            }
        }
        else {
            this.activeSubnav = !this.activeSubnav;
        }
        this.afOnClick.emit(e);
    }
    get toggleButtonText() {
        return this.activeSubnav ? 'Stäng meny' : 'Öppna meny';
    }
    get cssModifiers() {
        return {
            'digi-navigation-vertical-menu-item': true,
            'digi-navigation-vertical-menu-item--active': this.isActive,
            'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav,
            'digi-navigation-vertical-menu-item--icon': this.hasIcon,
            'digi-navigation-vertical-menu-item--badge': this.hasBadge
        };
    }
    get toggleIcon() {
        if (this.activeSubnav) {
            return h("digi-icon-minus", null);
        }
        else {
            return h("digi-icon-plus", null);
        }
    }
    render() {
        return (h("host", { key: 'b008de69c96417bd000c4c4fa345910a19d1fc2c', class: {
                'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
                'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
            } }, h("div", { key: 'beba2e7303abb687d69c516148ab9cb2ceec6397', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '131f7f0423cf65d03dd119211697ad3c182cd361', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '7a5df68c81673e574c1e48ce621a5a00c7e54450', id: `${this.afId}-link`, href: this.afHref, class: {
                'digi-navigation-vertical-menu-item__link': true,
                'digi-navigation-vertical-menu-item__has-subnav': true,
                'digi-navigation-vertical-menu-item__link--active': this.isActive,
                'digi-navigation-vertical-menu-item__link--expanded': this.activeSubnav
            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '4626c8903fe0c30b1899f45b2160da9f864d7154', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '77b31c7dce3d8dc4180f7a90e17d2370362ee834', name: "icon" })), h("span", { key: 'acf8a10408370f2419514443d0ab45081a6dad3f', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'd541aa1f6405374b84d042449f02b2883a04a195', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'ea14d278ad07c60fea424c76abd28f0504a72468', name: "badge" }))), h("button", { key: '2fec0f5b8ce3a490c894a4facc2cb7fd43b1b6a6', type: "button", id: `${this.afId}-toggle-button`, class: {
                'digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--toggle': true,
                'digi-navigation-vertical-menu-item__button--active': this.isActive
            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: '7b8f7eb50850a9cd0b8c4f5bd540ee8db11542fd', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'c0d9a48dfa22f3010576b0f29c212c9d5a31d44d', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: 'f9af1c1e34a6c52cf26b5c185517b88b2c389f97', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '407abc931c07b4dbdb87ef8e53ed8319bd3f30ac', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: '845a6903f28f97e89d6fc62a134233b12f12bc32', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '7668a487b51aced8e227ea03f98d291a7b372995', name: "icon" })), h("span", { key: '6a606039e0c72a0fbd9b5b35cb89bf9b9ad07a2f', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'f7f58186c3397e552928e22f06cc39b0ef5c35b5', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'e7b18a30518fa3c9689db8639b478f5445e401c9', name: "badge" })), h("span", { key: 'f55a20be40e0512b2d7e99832899f2597930160a', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '620ce5c869972cd332c69ccd73433f83f7413b96' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: '508b9df37b90d0409737bf24a4a81e6e161994e2', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: '4516ff318f441274bac19df6b1807c4e73db64ef', id: `${this.afId}-link`, href: this.afHref, class: {
                'digi-navigation-vertical-menu-item__link': true,
                'digi-navigation-vertical-menu-item__link--active': this.isActive
            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '8d87d230fdfc69a962c1d8b5ba0e347f30d160d4', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '3a76b7bb22241161a93a28b8da2fee4a8bc187cc', name: "icon" })), h("span", { key: '22a004383f4e3c8ea4c5cacf814bb4e5cdb32e80', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'ac1c1e4d8bf80e3f5dbcd0d2167371da084874e1', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'aba9cd8a14fe7d995907ed48e8e7a24581fbbebc', name: "badge" })))), this.isActive && (h("a", { key: 'c6e1f5fad0ed55b8cd05dd428fa4bdff6349b5e9', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
                'digi-navigation-vertical-menu-item__link': true,
                'digi-navigation-vertical-menu-item__link--active': this.isActive
            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'a75d83b50be5a8880d772b7ad437923c319413c5', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '60f589dac1f507138fae09c374523de98831027c', name: "icon" })), h("span", { key: '652e47dd7b5a8804cae11c7c5ae87f67a1183632', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '58bea6f0f43d27d3670080794968c7e12b02293f', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '160a3be67b528508619c74f9e5d142efc30b5bcb', name: "badge" })))))))));
    }
    static get is() { return "digi-navigation-vertical-menu-item"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["navigation-vertical-menu-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["navigation-vertical-menu-item.css"]
        };
    }
    static get properties() {
        return {
            "afText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the item text"
                        }],
                    "text": "S\u00E4tter texten i komponenten"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-text",
                "reflect": false
            },
            "afHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set href attribute"
                        }],
                    "text": "S\u00E4tter attributet 'href'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-href",
                "reflect": false
            },
            "afAriaCurrent": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set aria-current attribute"
                        }],
                    "text": "S\u00E4tter attributet 'aria-current'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-current",
                "reflect": false
            },
            "afActiveSubnav": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Toggles subnavigation. Pass in true for default active"
                        }],
                    "text": "\u00C4ndrar aktiv status p\u00E5 undermenyn. S\u00E4tt som 'true' f\u00F6r att ha \u00F6ppen fr\u00E5n b\u00F6rjan"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-active-subnav",
                "reflect": false
            },
            "afActive": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets active item visually. Pass in true for default active"
                        }],
                    "text": "Anv\u00E4nds f\u00F6r att markera ett menyval visuellt. S\u00E4tts till true f\u00F6r att visa det f\u00F6r n\u00E4rvarande valda (senast valda)."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-active",
                "reflect": false,
                "defaultValue": "false"
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator(\n    'digi-navigation-vertical-menu-item'\n  )"
            },
            "afOverrideLink": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Override default anchor link behavior and sets focus programmatically. Should only be used if default anchor link behaviour is a problem with e.g. routing"
                        }],
                    "text": "Kringg\u00E5r l\u00E4nkens vanliga beteende.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-override-link",
                "reflect": false,
                "defaultValue": "false"
            },
            "afHasSubnav": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "af-has-subnav",
                "reflect": false,
                "defaultValue": "false"
            },
            "afLang": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set language inside of title element. Defaults to 'sv' (swedish)."
                        }],
                    "text": "S\u00E4tt spr\u00E5k inuti rubrik-elementet. 'sv' (svenska) \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-lang",
                "reflect": false,
                "defaultValue": "'sv'"
            }
        };
    }
    static get states() {
        return {
            "hasSubnav": {},
            "hasIcon": {},
            "hasBadge": {},
            "isActive": {},
            "activeSubnav": {},
            "listItems": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnClick",
                "name": "afOnClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Link and toggle buttons 'onclick' event"
                        }],
                    "text": "L\u00E4nken och toggle-knappens 'onclick'-event"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afActiveSubnav",
                "methodName": "setHasSubnav"
            }, {
                "propName": "afActiveSubnav",
                "methodName": "onAfActiveSubnavChanged"
            }, {
                "propName": "afActive",
                "methodName": "setIsActive"
            }];
    }
}
