import { h, Host } from "@stencil/core";
import state from "./pn-sidenav-store";
import { angle_small_down, angle_small_up } from "pn-design-assets/pn-assets/icons.js";
export class PnSidenavLink {
    constructor() {
        this.name = '';
        this.href = '';
        this.target = null;
        this.linkid = null;
        this.icon = '';
        this.currentSelection = false;
        this.levelId = '';
        this.open = false;
        this.hasChildren = false;
    }
    hostElement;
    componentWillLoad() {
        this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;
        const safeLevelName = this.name.toLowerCase().replace(/\W/gi, '_');
        if (this.hasChildren && this.name) {
            this.levelId = `sidenav-lvl${2}-${safeLevelName}`;
        }
        if (!this.linkid && this.name) {
            this.linkid = `sidenav-link-${safeLevelName}`;
        }
    }
    // onClick={this.setOpenMenuLevel.bind(this)}
    onExpandClick() {
        state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;
    }
    getTagName() {
        return this.href ? 'a' : 'button';
    }
    render() {
        const TagName = this.getTagName();
        const linkAttributes = {
            href: this.href,
            target: this.target,
            id: this.linkid,
            class: 'pn-sidenav-link',
        };
        let buttonAttributes = {
            'aria-controls': this.levelId,
            'aria-label': (this.open ? state.i18n.close : state.i18n.open) + ' ' + this.name,
            'aria-expanded': (state.openLevel + '' === this.levelId + '') + '',
            'onClick': this.onExpandClick.bind(this),
        };
        return (h(Host, { key: '27734f09ff2f1333ee2921aaa5175e17bdc8db4f', role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.currentSelection }, h(TagName, { key: 'f0f2a3e4e0c74f52b95ce882bf1fbc76cf90d7f3', ...linkAttributes, ...(TagName === 'button' && { ...buttonAttributes }) }, this.icon ? h("pn-icon", { icon: this.icon, color: "blue700" }) : null, h("span", { key: '543f9cfafc3f37ce4f94a4c5e6468222f251f860' }, this.name), this.hasChildren && TagName === 'button' ? (h("div", { class: "pn-sidenav-link-expand" }, this.open ? (h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" })) : (h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" })))) : null), this.hasChildren && TagName === 'a' ? (h("button", { ...buttonAttributes, class: "pn-sidenav-link-expand" }, this.open ? h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" }) : h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }))) : null, h("slot", { key: '1385cf91c63369f307edbdb45bb639d4674cad80' })));
    }
    static get is() { return "pn-sidenav-link"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-sidenav-link.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-sidenav-link.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name"
                },
                "attribute": "name",
                "reflect": false,
                "defaultValue": "''"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Href"
                },
                "attribute": "href",
                "reflect": false,
                "defaultValue": "''"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Target"
                },
                "attribute": "target",
                "reflect": false,
                "defaultValue": "null"
            },
            "linkid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Link id"
                },
                "attribute": "linkid",
                "reflect": false,
                "defaultValue": "null"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Icon"
                },
                "attribute": "icon",
                "reflect": false,
                "defaultValue": "''"
            },
            "currentSelection": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Currently selected"
                },
                "attribute": "current-selection",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "levelId": {},
            "open": {},
            "hasChildren": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-sidenav-link.js.map
