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: '4034a13fcdb1057df5b88815be9eb37dba601a87', class: {
                'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
                'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
            } }, h("div", { key: '4980f784e2c75e6f0acec17e5af2c395b884b8db', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '335b03a7123d65c6ce8f247136a37ceae32f6798', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '713f3ddab78e64abb6045008f2d773f7f0e2f8ba', 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: 'c20202f05ab4b8e9b23fcd89613f30e88e3b66d7', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '699126ccd002240e5bf13905ed2b1d03805230a4', name: "icon" })), h("span", { key: '0fd8bfe80480ac6dd299c7b9419e0f87dd4d8227', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '4576c36918ebead122134139f586e9be47d0273d', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '3320ebac27d8ce208e469d40083699d4596ea9f0', name: "badge" }))), h("button", { key: 'ec9ee669f4db79f4f98d06492f37b8f7ff338330', 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: '010519c486d071b2e80e70a6aba7cf3bab97b329', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'f922fc7be5bb789ac411bd2ba5eb63ac64a15fed', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '45c9d0ae0a1073ae11d5b29b0e5d6d303a4eea83', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '28d8337697b6c2796d86841b87a0b9a11d3eb539', 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: 'd94f4e8b85c0be6a8f282086bce352b3a6eccc5a', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '3245aea52c63c01c6ed2b60b67539b44a5a12d55', name: "icon" })), h("span", { key: '0ec740d571391b45270be0a81df9e87c4cb2cd27', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'e7ecbe1b97debc26c4f33788a0cd8948e794d2de', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '87561faf7d006134c879bbb2ecccb20d35cbcc40', name: "badge" })), h("span", { key: '230dfc05b2c0c3ad64feddc308c1ae7f2b80bd16', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'c563c4c3de12113cbc83af4566e971f141477dd3' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: '3899bdf29953349f5f705c2bb7eecab4602ecaf8', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: 'fb90be5417c3cb76174fe59dbde17b6f20776f4e', 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: 'f04416cc6c14114834bfaed522546fc77c84a9ed', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '28b5934e236acf522fc243eca1fbb896cf30d389', name: "icon" })), h("span", { key: 'ef064f03fb347b35c571f923c8c105fd897b3294', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'a3d4eb270f45123648944157f937ea28feb7e258', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'fe65ca6f1d00579765ce8a6550d6583c7772ad1d', name: "badge" })))), this.isActive && (h("a", { key: '439489e2388a2eaca7509749763c423e58dbff91', 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: 'c37a3158554cc3496e43aa8e57bd07eb72201fd3', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'ac4617afe1bbf5510ceb7533553099ac855dcf7a', name: "icon" })), h("span", { key: '4cfa666a58ee43c67d5232839f9457a4181974b5', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '49d931e36fe2a43249cb69ea0a19086a335ef0e3', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'd76c01d73407d8264932808df69547f7dc352a6b', 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"
            }];
    }
}
