var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to set private field on non-instance");
    }
    privateMap.set(receiver, value);
    return value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to get private field on non-instance");
    }
    return privateMap.get(receiver);
};
var _links, _timer;
import { h } from "@stencil/core";
import { HEIGHT_HEADER } from '../../utils/constants';
export class Nav {
    constructor() {
        this.active = false;
        this._height = null;
        _links.set(this, 0);
        _timer.set(this, 0);
        this.handleSlotChange = () => {
            const nodes = Array.from(this.el.childNodes);
            __classPrivateFieldSet(this, _links, nodes.filter(node => node.nodeName === 'BCE-LINK').length);
            this.toggle(this.active);
        };
    }
    async toggle(active) {
        this.active = active != undefined ? active : !this.active;
        // Collapse nested links
        const links = Array.from(this.el.querySelectorAll('bce-link'));
        for (const link of links)
            link.toggle(false);
        // Animation logic
        if (__classPrivateFieldGet(this, _timer))
            window.clearTimeout(__classPrivateFieldGet(this, _timer));
        const height = __classPrivateFieldGet(this, _links) * HEIGHT_HEADER;
        this._height = this.active ? 0 : height;
        await new Promise(res => setTimeout(res, 20));
        this._height = this.active ? height : 0;
        __classPrivateFieldSet(this, _timer, window.setTimeout(() => (this._height = null), 300));
    }
    componentWillLoad() {
        this.handleSlotChange();
    }
    componentDidLoad() {
        const slot = this.el.shadowRoot.querySelector('slot');
        slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', this.handleSlotChange);
    }
    render() {
        const height = this._height != null ? `${this._height}px` : undefined;
        const style = height ? { style: { height } } : {};
        return [
            h("bce-nav-button", null),
            h("nav", Object.assign({}, style),
                h("slot", null))
        ];
    }
    static get is() { return "bce-nav"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "bce-header": ["bce-nav.header.scss"],
        "bce-side-bar": ["bce-nav.side-bar.scss"],
        "default": ["bce-nav.side-bar.scss"]
    }; }
    static get styleUrls() { return {
        "bce-header": ["bce-nav.header.css"],
        "bce-side-bar": ["bce-nav.side-bar.css"],
        "default": ["bce-nav.side-bar.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": true,
            "defaultValue": "false"
        }
    }; }
    static get states() { return {
        "_height": {}
    }; }
    static get methods() { return {
        "toggle": {
            "complexType": {
                "signature": "(active?: boolean) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
_links = new WeakMap(), _timer = new WeakMap();
