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 __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 _menu, _popper;
import { library } from '@fortawesome/fontawesome-svg-core';
import * as FAS from '@fortawesome/free-solid-svg-icons';
import { createPopper } from '@popperjs/core';
import { h } from "@stencil/core";
import { MenuControl } from '../../utils/menu-control';
library.add(FAS.faEllipsisH);
export class BceMenu {
    constructor() {
        this.icon = 'fas:ellipsis-h';
        this.placement = 'bottom-start';
        this.hideLabel = false;
        _menu.set(this, void 0);
        _popper.set(this, void 0);
        this.handleSlotChange = () => {
            var _a;
            const items = Array.from(this.el.querySelectorAll('bce-button'));
            (_a = __classPrivateFieldGet(this, _menu)) === null || _a === void 0 ? void 0 : _a.setItems(items);
        };
        this.handleResize = () => {
            const BP = { small: 600, medium: 1024, large: 1440 };
            const width = window.innerWidth;
            this.hideLabel = !!this.labelCollapse && width < BP[this.labelCollapse];
        };
    }
    get trigger() {
        const root = this.el.shadowRoot;
        return root.querySelector('.trigger');
    }
    async next() {
        var _a;
        return (_a = __classPrivateFieldGet(this, _menu)) === null || _a === void 0 ? void 0 : _a.next();
    }
    async prev() {
        var _a;
        return (_a = __classPrivateFieldGet(this, _menu)) === null || _a === void 0 ? void 0 : _a.prev();
    }
    async reattach() {
        const reference = this.trigger;
        const dropdown = this.el.shadowRoot.querySelector("[role='menu']");
        if (__classPrivateFieldGet(this, _popper))
            __classPrivateFieldGet(this, _popper).destroy();
        __classPrivateFieldSet(this, _popper, createPopper(reference, dropdown, {
            placement: this.placement,
            strategy: 'fixed'
        }));
    }
    async toggle(active = !this.active) {
        this.active = active;
        if (__classPrivateFieldGet(this, _popper))
            __classPrivateFieldGet(this, _popper).update();
    }
    componentWillLoad() {
        if (this.label && this.labelCollapse) {
            window.addEventListener('resize', this.handleResize);
            this.handleResize();
        }
    }
    componentDidLoad() {
        __classPrivateFieldSet(this, _menu, new MenuControl({
            parent: this.el,
            trigger: this.trigger,
            onToggle: this.toggle.bind(this)
        }));
        const slot = this.el.shadowRoot.querySelector('slot');
        slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', this.handleSlotChange);
        this.handleSlotChange();
        this.reattach();
    }
    componentDidUnload() {
        if (__classPrivateFieldGet(this, _popper))
            __classPrivateFieldGet(this, _popper).destroy();
        if (__classPrivateFieldGet(this, _menu))
            __classPrivateFieldGet(this, _menu).dispose();
        window.removeEventListener('resize', this.handleResize);
    }
    render() {
        return [
            h("bce-button", { a11yAriaHaspopup: "menu", a11yAriaExpanded: this.active, class: "trigger", design: "text", icon: this.icon, iconPosition: "right" }, !this.hideLabel && this.label),
            h("div", { role: "menu", "data-active": this.active },
                h("slot", null))
        ];
    }
    static get is() { return "bce-menu"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-menu.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-menu.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": true
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": true,
            "defaultValue": "'fas:ellipsis-h'"
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": true
        },
        "labelCollapse": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'small' | 'medium' | 'large'",
                "resolved": "\"large\" | \"medium\" | \"small\"",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-collapse",
            "reflect": true
        },
        "placement": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "placement",
            "reflect": true,
            "defaultValue": "'bottom-start'"
        }
    }; }
    static get states() { return {
        "hideLabel": {}
    }; }
    static get methods() { return {
        "next": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "prev": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "reattach": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "HTMLElement": {
                        "location": "global"
                    },
                    "Placement": {
                        "location": "import",
                        "path": "@popperjs/core"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "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"; }
}
_menu = new WeakMap(), _popper = new WeakMap();
