const TRANSITION_EVENTS = [
    "transitionend",
    "webkitTransitionEnd",
    "oTransitionEnd",
];
// const TRANSITION_PROPERTIES = ['transition', 'MozTransition', 'webkitTransition', 'WebkitTransition', 'OTransition']
const DELTA = 5;

class Menu {
    constructor(el, config = {}, _PS = null) {
        this._el = el;
        this._horizontal = config.orientation === "horizontal";
        this._animate = config.animate !== false;
        this._accordion = config.accordion !== false;
        this._showDropdownOnHover = Boolean(config.showDropdownOnHover);
        this._closeChildren = Boolean(config.closeChildren);
        this._rtl =
            document.documentElement.getAttribute("dir") === "rtl" ||
            document.body.getAttribute("dir") === "rtl";

        this._onOpen = config.onOpen || (() => {});
        this._onOpened = config.onOpened || (() => {});
        this._onClose = config.onClose || (() => {});
        this._onClosed = config.onClosed || (() => {});

        this._psScroll = null;
        this._topParent = null;
        this._menuBgClass = null;

        el.classList.add("menu");
        el.classList[this._animate ? "remove" : "add"]("menu-no-animation");

        if (!this._horizontal) {
            el.classList.add("menu-vertical");
            el.classList.remove("menu-horizontal");

            const PerfectScrollbarLib = _PS || window.PerfectScrollbar;

            if (PerfectScrollbarLib) {
                this._scrollbar = new PerfectScrollbarLib(
                    el.querySelector(".menu-inner"),
                    {
                        suppressScrollX: true,
                        wheelPropagation: !Menu._hasClass(
                            "layout-menu-fixed layout-menu-fixed-offcanvas",
                        ),
                    },
                );

                window.Helpers.menuPsScroll = this._scrollbar;
            } else {
                el.querySelector(".menu-inner").classList.add("overflow-auto");
            }
        } else {
            el.classList.add("menu-horizontal");
            el.classList.remove("menu-vertical");

            this._inner = el.querySelector(".menu-inner");
            const container = this._inner.parentNode;

            this._prevBtn = el.querySelector(".menu-horizontal-prev");
            if (!this._prevBtn) {
                this._prevBtn = document.createElement("a");
                this._prevBtn.href = "#";
                this._prevBtn.className = "menu-horizontal-prev";
                container.appendChild(this._prevBtn);
            }

            this._wrapper = el.querySelector(".menu-horizontal-wrapper");
            if (!this._wrapper) {
                this._wrapper = document.createElement("div");
                this._wrapper.className = "menu-horizontal-wrapper";
                this._wrapper.appendChild(this._inner);
                container.appendChild(this._wrapper);
            }

            this._nextBtn = el.querySelector(".menu-horizontal-next");
            if (!this._nextBtn) {
                this._nextBtn = document.createElement("a");
                this._nextBtn.href = "#";
                this._nextBtn.className = "menu-horizontal-next";
                container.appendChild(this._nextBtn);
            }

            this._innerPosition = 0;
            this.update();
        }

        // Add data attribute for bg color class of menu
        const menuClassList = el.classList;

        for (let i = 0; i < menuClassList.length; i++) {
            if (menuClassList[i].startsWith("bg-")) {
                this._menuBgClass = menuClassList[i];
            }
        }
        el.setAttribute("data-bg-class", this._menuBgClass);

        // Switch to vertical menu on small screen for horizontal menu layout on page load
        if (
            this._horizontal &&
            window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT
        ) {
            this.switchMenu("vertical");
        } else {
            this._bindEvents();
        }

        // Link menu instance to element
        el.menuInstance = this;
    }

    _bindEvents() {
        // Click Event
        this._evntElClick = (e) => {
            // Find top parent element
            if (
                e.target.closest("ul") &&
                e.target.closest("ul").classList.contains("menu-inner")
            ) {
                const menuItem = Menu._findParent(e.target, "menu-item", false);

                // eslint-disable-next-line prefer-destructuring
                if (menuItem) this._topParent = menuItem.childNodes[0];
            }

            const toggleLink = e.target.classList.contains("menu-toggle")
                ? e.target
                : Menu._findParent(e.target, "menu-toggle", false);

            if (toggleLink) {
                e.preventDefault();

                if (toggleLink.getAttribute("data-hover") !== "true") {
                    this.toggle(toggleLink);
                }
            }
        };
        if (
            (!this._showDropdownOnHover && this._horizontal) ||
            !this._horizontal ||
            window.Helpers.isMobileDevice
        )
            this._el.addEventListener("click", this._evntElClick);

        this._evntWindowResize = () => {
            this.update();
            if (this._lastWidth !== window.innerWidth) {
                this._lastWidth = window.innerWidth;
                this.update();
            }

            const horizontalMenuTemplate = document.querySelector(
                "[data-template^='horizontal-menu']",
            );
            if (!this._horizontal && !horizontalMenuTemplate)
                this.manageScroll();
        };
        window.addEventListener("resize", this._evntWindowResize);

        if (this._horizontal) {
            this._evntPrevBtnClick = (e) => {
                e.preventDefault();
                if (this._prevBtn.classList.contains("disabled")) return;
                this._slide("prev");
            };
            this._prevBtn.addEventListener("click", this._evntPrevBtnClick);

            this._evntNextBtnClick = (e) => {
                e.preventDefault();
                if (this._nextBtn.classList.contains("disabled")) return;
                this._slide("next");
            };
            this._nextBtn.addEventListener("click", this._evntNextBtnClick);

            this._evntBodyClick = (e) => {
                if (
                    !this._inner.contains(e.target) &&
                    this._el.querySelectorAll(".menu-inner > .menu-item.open")
                        .length
                )
                    this.closeAll();
            };
            document.body.addEventListener("click", this._evntBodyClick);

            if (this._showDropdownOnHover) {
                /** ***********************************************
                 * Horizontal Menu Mouse Over Event
                 * ? e.target !== e.currentTarget condition to disable mouseover event on whole menu navbar
                 * ? !e.target.parentNode.classList.contains('open') to disable mouseover events on icon, text and dropdown arrow
                 */
                this._evntElMouseOver = (e) => {
                    if (
                        e.target !== e.currentTarget &&
                        !e.target.parentNode.classList.contains("open")
                    ) {
                        const toggleLink = e.target.classList.contains(
                            "menu-toggle",
                        )
                            ? e.target
                            : null;

                        if (toggleLink) {
                            e.preventDefault();

                            if (
                                toggleLink.getAttribute("data-hover") !== "true"
                            ) {
                                this.toggle(toggleLink);
                            }
                        }
                    }
                    e.stopPropagation();
                };
                if (
                    this._horizontal &&
                    window.screen.width > window.Helpers.LAYOUT_BREAKPOINT
                ) {
                    this._el.addEventListener(
                        "mouseover",
                        this._evntElMouseOver,
                    );
                }

                /** ***********************************************
                 * Horizontal Menu Mouse Out Event
                 * ? e.target !== e.currentTarget condition to disable mouseout event on whole menu navbar
                 * ? mouseOutEl.parentNode.classList.contains('open') to check if the mouseout element has open class or not
                 * ? !mouseOutEl.classList.contains('menu-toggle') to check if mouseout was from single menu item and not from the one which has submenu
                 * ? !mouseOverEl.parentNode.classList.contains('menu-link') to disable mouseout event for icon, text and dropdown arrow
                 */
                this._evntElMouseOut = (e) => {
                    const mainEl = e.currentTarget;
                    const mouseOutEl = e.target;
                    const mouseOverEl = e.toElement || e.relatedTarget;

                    // Find absolute parent of any menu item from which mouseout event triggered
                    if (
                        mouseOutEl.closest("ul") &&
                        mouseOutEl
                            .closest("ul")
                            .classList.contains("menu-inner")
                    ) {
                        this._topParent = mouseOutEl;
                    }

                    if (
                        mouseOutEl !== mainEl &&
                        (mouseOutEl.parentNode.classList.contains("open") ||
                            !mouseOutEl.classList.contains("menu-toggle")) &&
                        mouseOverEl &&
                        mouseOverEl.parentNode &&
                        !mouseOverEl.parentNode.classList.contains("menu-link")
                    ) {
                        // When mouse goes totally out of menu items, check mouse over element to confirm it's not the child of menu, once confirmed close the menu
                        if (
                            this._topParent &&
                            !Menu.childOf(
                                mouseOverEl,
                                this._topParent.parentNode,
                            )
                        ) {
                            const toggleLink =
                                this._topParent.classList.contains(
                                    "menu-toggle",
                                )
                                    ? this._topParent
                                    : null;

                            if (toggleLink) {
                                e.preventDefault();

                                if (
                                    toggleLink.getAttribute("data-hover") !==
                                    "true"
                                ) {
                                    this.toggle(toggleLink);
                                    this._topParent = null;
                                }
                            }
                        }

                        // When mouse enter the sub menu, check if it's child of the initially mouse overed menu item(Actual Parent),
                        // if it's the parent do not close the sub menu else close the sub menu
                        if (Menu.childOf(mouseOverEl, mouseOutEl.parentNode)) {
                            return;
                        }
                        const toggleLink = mouseOutEl.classList.contains(
                            "menu-toggle",
                        )
                            ? mouseOutEl
                            : null;

                        if (toggleLink) {
                            e.preventDefault();

                            if (
                                toggleLink.getAttribute("data-hover") !== "true"
                            ) {
                                this.toggle(toggleLink);
                            }
                        }
                    }
                    e.stopPropagation();
                };
                if (
                    this._horizontal &&
                    window.screen.width > window.Helpers.LAYOUT_BREAKPOINT
                ) {
                    this._el.addEventListener("mouseout", this._evntElMouseOut);
                }
            }
        }
    }

    static childOf(/* child node */ c, /* parent node */ p) {
        // returns boolean
        if (c.parentNode) {
            while ((c = c.parentNode) && c !== p);
            return !!c;
        }
        return false;
    }

    _unbindEvents() {
        if (this._evntElClick) {
            this._el.removeEventListener("click", this._evntElClick);
            this._evntElClick = null;
        }

        if (this._evntElMouseOver) {
            this._el.removeEventListener("mouseover", this._evntElMouseOver);
            this._evntElMouseOver = null;
        }

        if (this._evntElMouseOut) {
            this._el.removeEventListener("mouseout", this._evntElMouseOut);
            this._evntElMouseOut = null;
        }

        if (this._evntWindowResize) {
            window.removeEventListener("resize", this._evntWindowResize);
            this._evntWindowResize = null;
        }

        if (this._evntBodyClick) {
            document.body.removeEventListener("click", this._evntBodyClick);
            this._evntBodyClick = null;
        }

        if (this._evntInnerMousemove) {
            this._inner.removeEventListener(
                "mousemove",
                this._evntInnerMousemove,
            );
            this._evntInnerMousemove = null;
        }

        if (this._evntInnerMouseleave) {
            this._inner.removeEventListener(
                "mouseleave",
                this._evntInnerMouseleave,
            );
            this._evntInnerMouseleave = null;
        }
    }

    static _isRoot(item) {
        return !Menu._findParent(item, "menu-item", false);
    }

    static _findParent(el, cls, throwError = true) {
        if (el.tagName.toUpperCase() === "BODY") return null;
        el = el.parentNode;
        while (
            el.tagName.toUpperCase() !== "BODY" &&
            !el.classList.contains(cls)
        ) {
            el = el.parentNode;
        }

        el = el.tagName.toUpperCase() !== "BODY" ? el : null;

        if (!el && throwError)
            throw new Error(`Cannot find \`.${cls}\` parent element`);

        return el;
    }

    static _findChild(el, cls) {
        const items = el.childNodes;
        const found = [];

        for (let i = 0, l = items.length; i < l; i++) {
            if (items[i].classList) {
                let passed = 0;

                for (let j = 0; j < cls.length; j++) {
                    if (items[i].classList.contains(cls[j])) passed += 1;
                }

                if (cls.length === passed) found.push(items[i]);
            }
        }

        return found;
    }

    static _findMenu(item) {
        let curEl = item.childNodes[0];
        let menu = null;

        while (curEl && !menu) {
            if (curEl.classList && curEl.classList.contains("menu-sub"))
                menu = curEl;
            curEl = curEl.nextSibling;
        }

        if (!menu)
            throw new Error(
                "Cannot find `.menu-sub` element for the current `.menu-toggle`",
            );

        return menu;
    }

    // Has class
    static _hasClass(cls, el = window.Helpers.ROOT_EL) {
        let result = false;

        cls.split(" ").forEach((c) => {
            if (el.classList.contains(c)) result = true;
        });

        return result;
    }

    open(el, closeChildren = this._closeChildren) {
        const item = this._findUnopenedParent(
            Menu._getItem(el, true),
            closeChildren,
        );

        if (!item) return;

        const toggleLink = Menu._getLink(item, true);

        Menu._promisify(
            this._onOpen,
            this,
            item,
            toggleLink,
            Menu._findMenu(item),
        )
            .then(() => {
                if (!this._horizontal || !Menu._isRoot(item)) {
                    if (this._animate && !this._horizontal) {
                        window.requestAnimationFrame(() =>
                            this._toggleAnimation(true, item, false),
                        );
                        if (this._accordion)
                            this._closeOther(item, closeChildren);
                    } else if (this._animate) {
                        this._toggleDropdown(true, item, closeChildren);
                        // eslint-disable-next-line no-unused-expressions
                        this._onOpened &&
                            this._onOpened(
                                this,
                                item,
                                toggleLink,
                                Menu._findMenu(item),
                            );
                    } else {
                        item.classList.add("open");
                        // eslint-disable-next-line no-unused-expressions
                        this._onOpened &&
                            this._onOpened(
                                this,
                                item,
                                toggleLink,
                                Menu._findMenu(item),
                            );
                        if (this._accordion)
                            this._closeOther(item, closeChildren);
                    }
                } else {
                    this._toggleDropdown(true, item, closeChildren);
                    // eslint-disable-next-line no-unused-expressions
                    this._onOpened &&
                        this._onOpened(
                            this,
                            item,
                            toggleLink,
                            Menu._findMenu(item),
                        );
                }
            })
            .catch(() => {});
    }

    close(el, closeChildren = this._closeChildren, _autoClose = false) {
        const item = Menu._getItem(el, true);
        const toggleLink = Menu._getLink(el, true);

        if (
            !item.classList.contains("open") ||
            item.classList.contains("disabled")
        )
            return;

        Menu._promisify(
            this._onClose,
            this,
            item,
            toggleLink,
            Menu._findMenu(item),
            _autoClose,
        )
            .then(() => {
                if (!this._horizontal || !Menu._isRoot(item)) {
                    if (this._animate && !this._horizontal) {
                        window.requestAnimationFrame(() =>
                            this._toggleAnimation(false, item, closeChildren),
                        );
                    } else {
                        item.classList.remove("open");

                        if (closeChildren) {
                            const opened =
                                item.querySelectorAll(".menu-item.open");
                            for (let i = 0, l = opened.length; i < l; i++)
                                opened[i].classList.remove("open");
                        }

                        // eslint-disable-next-line no-unused-expressions
                        this._onClosed &&
                            this._onClosed(
                                this,
                                item,
                                toggleLink,
                                Menu._findMenu(item),
                            );
                    }
                } else {
                    this._toggleDropdown(false, item, closeChildren);
                    // eslint-disable-next-line no-unused-expressions
                    this._onClosed &&
                        this._onClosed(
                            this,
                            item,
                            toggleLink,
                            Menu._findMenu(item),
                        );
                }
            })
            .catch(() => {});
    }

    _closeOther(item, closeChildren) {
        const opened = Menu._findChild(item.parentNode, ["menu-item", "open"]);

        for (let i = 0, l = opened.length; i < l; i++) {
            if (opened[i] !== item) this.close(opened[i], closeChildren);
        }
    }

    toggle(el, closeChildren = this._closeChildren) {
        const item = Menu._getItem(el, true);
        // const toggleLink = Menu._getLink(el, true)

        if (item.classList.contains("open")) this.close(item, closeChildren);
        else this.open(item, closeChildren);
    }

    _toggleDropdown(show, item, closeChildren) {
        const menu = Menu._findMenu(item);
        const actualItem = item;
        let subMenuItem = false;

        if (show) {
            if (Menu._findParent(item, "menu-sub", false)) {
                subMenuItem = true;
                item = this._topParent ? this._topParent.parentNode : item;
            }

            const wrapperWidth = Math.round(
                this._wrapper.getBoundingClientRect().width,
            );
            const position = this._innerPosition;
            const itemOffset = this._getItemOffset(item);
            const itemWidth = Math.round(item.getBoundingClientRect().width);

            if (itemOffset - DELTA <= -1 * position) {
                this._innerPosition = -1 * itemOffset;
            } else if (
                itemOffset + position + itemWidth + DELTA >=
                wrapperWidth
            ) {
                if (itemWidth > wrapperWidth) {
                    this._innerPosition = -1 * itemOffset;
                } else {
                    this._innerPosition =
                        -1 * (itemOffset + itemWidth - wrapperWidth);
                }
            }

            actualItem.classList.add("open");

            const menuWidth = Math.round(menu.getBoundingClientRect().width);

            if (subMenuItem) {
                if (
                    itemOffset + this._innerPosition + menuWidth * 2 >
                        wrapperWidth &&
                    menuWidth < wrapperWidth &&
                    menuWidth >= itemWidth
                ) {
                    menu.style.left = [this._rtl ? "100%" : "-100%"];
                }
            } else if (
                itemOffset + this._innerPosition + menuWidth > wrapperWidth &&
                menuWidth < wrapperWidth &&
                menuWidth > itemWidth
            ) {
                menu.style[this._rtl ? "marginRight" : "marginLeft"] =
                    `-${menuWidth - itemWidth}px`;
            }

            this._closeOther(actualItem, closeChildren);
            this._updateSlider();
        } else {
            const toggle = Menu._findChild(item, ["menu-toggle"]);

            // eslint-disable-next-line no-unused-expressions
            toggle.length && toggle[0].removeAttribute("data-hover", "true");
            item.classList.remove("open");
            menu.style[this._rtl ? "marginRight" : "marginLeft"] = null;

            if (closeChildren) {
                const opened = menu.querySelectorAll(".menu-item.open");

                for (let i = 0, l = opened.length; i < l; i++)
                    opened[i].classList.remove("open");
            }
        }
    }

    _slide(direction) {
        const wrapperWidth = Math.round(
            this._wrapper.getBoundingClientRect().width,
        );
        const innerWidth = this._innerWidth;
        let newPosition;

        if (direction === "next") {
            newPosition = this._getSlideNextPos();

            if (innerWidth + newPosition < wrapperWidth) {
                newPosition = wrapperWidth - innerWidth;
            }
        } else {
            newPosition = this._getSlidePrevPos();

            if (newPosition > 0) newPosition = 0;
        }

        this._innerPosition = newPosition;
        this.update();
    }

    _getSlideNextPos() {
        const wrapperWidth = Math.round(
            this._wrapper.getBoundingClientRect().width,
        );
        const position = this._innerPosition;
        let curItem = this._inner.childNodes[0];
        let left = 0;

        while (curItem) {
            if (curItem.tagName) {
                const curItemWidth = Math.round(
                    curItem.getBoundingClientRect().width,
                );

                if (
                    left + position - DELTA <= wrapperWidth &&
                    left + position + curItemWidth + DELTA >= wrapperWidth
                ) {
                    if (curItemWidth > wrapperWidth && left === -1 * position)
                        left += curItemWidth;
                    break;
                }

                left += curItemWidth;
            }

            curItem = curItem.nextSibling;
        }

        return -1 * left;
    }

    _getSlidePrevPos() {
        const wrapperWidth = Math.round(
            this._wrapper.getBoundingClientRect().width,
        );
        const position = this._innerPosition;
        let curItem = this._inner.childNodes[0];
        let left = 0;

        while (curItem) {
            if (curItem.tagName) {
                const curItemWidth = Math.round(
                    curItem.getBoundingClientRect().width,
                );

                if (
                    left - DELTA <= -1 * position &&
                    left + curItemWidth + DELTA >= -1 * position
                ) {
                    if (curItemWidth <= wrapperWidth)
                        left = left + curItemWidth - wrapperWidth;
                    break;
                }

                left += curItemWidth;
            }

            curItem = curItem.nextSibling;
        }

        return -1 * left;
    }

    static _getItem(el, toggle) {
        let item = null;
        const selector = toggle ? "menu-toggle" : "menu-link";

        if (el.classList.contains("menu-item")) {
            if (Menu._findChild(el, [selector]).length) item = el;
        } else if (el.classList.contains(selector)) {
            item = el.parentNode.classList.contains("menu-item")
                ? el.parentNode
                : null;
        }

        if (!item) {
            throw new Error(
                `${toggle ? "Toggable " : ""}\`.menu-item\` element not found.`,
            );
        }

        return item;
    }

    static _getLink(el, toggle) {
        let found = [];
        const selector = toggle ? "menu-toggle" : "menu-link";

        if (el.classList.contains(selector)) found = [el];
        else if (el.classList.contains("menu-item"))
            found = Menu._findChild(el, [selector]);

        if (!found.length)
            throw new Error(`\`${selector}\` element not found.`);

        return found[0];
    }

    _findUnopenedParent(item, closeChildren) {
        let tree = [];
        let parentItem = null;

        while (item) {
            if (item.classList.contains("disabled")) {
                parentItem = null;
                tree = [];
            } else {
                if (!item.classList.contains("open")) parentItem = item;
                tree.push(item);
            }

            item = Menu._findParent(item, "menu-item", false);
        }

        if (!parentItem) return null;
        if (tree.length === 1) return parentItem;

        tree = tree.slice(0, tree.indexOf(parentItem));

        for (let i = 0, l = tree.length; i < l; i++) {
            tree[i].classList.add("open");

            if (this._accordion) {
                const openedItems = Menu._findChild(tree[i].parentNode, [
                    "menu-item",
                    "open",
                ]);

                for (let j = 0, k = openedItems.length; j < k; j++) {
                    if (openedItems[j] !== tree[i]) {
                        openedItems[j].classList.remove("open");

                        if (closeChildren) {
                            const openedChildren =
                                openedItems[j].querySelectorAll(
                                    ".menu-item.open",
                                );
                            for (
                                let x = 0, z = openedChildren.length;
                                x < z;
                                x++
                            ) {
                                openedChildren[x].classList.remove("open");
                            }
                        }
                    }
                }
            }
        }

        return parentItem;
    }

    _toggleAnimation(open, item, closeChildren) {
        const toggleLink = Menu._getLink(item, true);
        const menu = Menu._findMenu(item);

        Menu._unbindAnimationEndEvent(item);

        const linkHeight = Math.round(
            toggleLink.getBoundingClientRect().height,
        );

        item.style.overflow = "hidden";

        const clearItemStyle = () => {
            item.classList.remove("menu-item-animating");
            item.classList.remove("menu-item-closing");
            item.style.overflow = null;
            item.style.height = null;

            if (!this._horizontal) this.update();
        };

        if (open) {
            item.style.height = `${linkHeight}px`;
            item.classList.add("menu-item-animating");
            item.classList.add("open");

            Menu._bindAnimationEndEvent(item, () => {
                clearItemStyle();
                this._onOpened(this, item, toggleLink, menu);
            });

            setTimeout(() => {
                item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`;
            }, 50);
        } else {
            item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`;
            item.classList.add("menu-item-animating");
            item.classList.add("menu-item-closing");

            Menu._bindAnimationEndEvent(item, () => {
                item.classList.remove("open");
                clearItemStyle();

                if (closeChildren) {
                    const opened = item.querySelectorAll(".menu-item.open");
                    for (let i = 0, l = opened.length; i < l; i++)
                        opened[i].classList.remove("open");
                }

                this._onClosed(this, item, toggleLink, menu);
            });

            setTimeout(() => {
                item.style.height = `${linkHeight}px`;
            }, 50);
        }
    }

    static _bindAnimationEndEvent(el, handler) {
        const cb = (e) => {
            if (e.target !== el) return;
            Menu._unbindAnimationEndEvent(el);
            handler(e);
        };

        let duration = window.getComputedStyle(el).transitionDuration;
        duration =
            parseFloat(duration) * (duration.indexOf("ms") !== -1 ? 1 : 1000);

        el._menuAnimationEndEventCb = cb;
        TRANSITION_EVENTS.forEach((ev) =>
            el.addEventListener(ev, el._menuAnimationEndEventCb, false),
        );

        el._menuAnimationEndEventTimeout = setTimeout(() => {
            cb({ target: el });
        }, duration + 50);
    }

    _getItemOffset(item) {
        let curItem = this._inner.childNodes[0];
        let left = 0;

        while (curItem !== item) {
            if (curItem.tagName) {
                left += Math.round(curItem.getBoundingClientRect().width);
            }

            curItem = curItem.nextSibling;
        }

        return left;
    }

    _updateSlider(wrapperWidth = null, innerWidth = null, position = null) {
        const _wrapperWidth =
            wrapperWidth !== null
                ? wrapperWidth
                : Math.round(this._wrapper.getBoundingClientRect().width);
        const _innerWidth = innerWidth !== null ? innerWidth : this._innerWidth;
        const _position = position !== null ? position : this._innerPosition;

        if (
            _innerWidth < _wrapperWidth ||
            window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT
        ) {
            this._prevBtn.classList.add("d-none");
            this._nextBtn.classList.add("d-none");
        } else {
            this._prevBtn.classList.remove("d-none");
            this._nextBtn.classList.remove("d-none");
        }
        if (
            _innerWidth > _wrapperWidth &&
            window.innerWidth > window.Helpers.LAYOUT_BREAKPOINT
        ) {
            if (_position === 0) this._prevBtn.classList.add("disabled");
            else this._prevBtn.classList.remove("disabled");

            if (_innerWidth + _position <= _wrapperWidth)
                this._nextBtn.classList.add("disabled");
            else this._nextBtn.classList.remove("disabled");
        }
    }

    static _promisify(fn, ...args) {
        const result = fn(...args);
        if (result instanceof Promise) {
            return result;
        }
        if (result === false) {
            return Promise.reject();
        }
        return Promise.resolve();
    }

    get _innerWidth() {
        const items = this._inner.childNodes;
        let width = 0;

        for (let i = 0, l = items.length; i < l; i++) {
            if (items[i].tagName) {
                width += Math.round(items[i].getBoundingClientRect().width);
            }
        }

        return width;
    }

    get _innerPosition() {
        return parseInt(
            this._inner.style[this._rtl ? "marginRight" : "marginLeft"] ||
                "0px",
            10,
        );
    }

    set _innerPosition(value) {
        this._inner.style[this._rtl ? "marginRight" : "marginLeft"] =
            `${value}px`;
        return value;
    }

    static _unbindAnimationEndEvent(el) {
        const cb = el._menuAnimationEndEventCb;

        if (el._menuAnimationEndEventTimeout) {
            clearTimeout(el._menuAnimationEndEventTimeout);
            el._menuAnimationEndEventTimeout = null;
        }

        if (!cb) return;

        TRANSITION_EVENTS.forEach((ev) =>
            el.removeEventListener(ev, cb, false),
        );
        el._menuAnimationEndEventCb = null;
    }

    closeAll(closeChildren = this._closeChildren) {
        const opened = this._el.querySelectorAll(
            ".menu-inner > .menu-item.open",
        );

        for (let i = 0, l = opened.length; i < l; i++)
            this.close(opened[i], closeChildren);
    }

    static setDisabled(el, disabled) {
        Menu._getItem(el, false).classList[disabled ? "add" : "remove"](
            "disabled",
        );
    }

    static isActive(el) {
        return Menu._getItem(el, false).classList.contains("active");
    }

    static isOpened(el) {
        return Menu._getItem(el, false).classList.contains("open");
    }

    static isDisabled(el) {
        return Menu._getItem(el, false).classList.contains("disabled");
    }

    update() {
        if (!this._horizontal) {
            if (this._scrollbar) {
                this._scrollbar.update();
            }
        } else {
            this.closeAll();

            const wrapperWidth = Math.round(
                this._wrapper.getBoundingClientRect().width,
            );
            const innerWidth = this._innerWidth;
            let position = this._innerPosition;

            if (wrapperWidth - position > innerWidth) {
                position = wrapperWidth - innerWidth;
                if (position > 0) position = 0;
                this._innerPosition = position;
            }

            this._updateSlider(wrapperWidth, innerWidth, position);
        }
    }

    manageScroll() {
        const { PerfectScrollbar } = window;
        const menuInner = document.querySelector(".menu-inner");

        if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
            if (this._scrollbar !== null) {
                // window.Helpers.menuPsScroll.destroy()
                this._scrollbar.destroy();
                this._scrollbar = null;
            }
            menuInner.classList.add("overflow-auto");
        } else {
            if (this._scrollbar === null) {
                const menuScroll = new PerfectScrollbar(
                    document.querySelector(".menu-inner"),
                    {
                        suppressScrollX: true,
                        wheelPropagation: false,
                    },
                );
                // window.Helpers.menuPsScroll = menuScroll
                this._scrollbar = menuScroll;
            }
            menuInner.classList.remove("overflow-auto");
        }
    }

    switchMenu(menu) {
        // Unbind Events
        this._unbindEvents();

        // const html = document.documentElement
        const navbar = document.querySelector("nav.layout-navbar");
        const navbarCollapse = document.querySelector("#navbar-collapse");
        /* const fullNavbar = document.querySelector('.layout-navbar-full')
    const contentNavbar = document.querySelector('.layout-content-navbar')
    const contentWrapper = document.querySelector('.content-wrapper') */
        const asideMenuWrapper = document.querySelector("#layout-menu div");
        const asideMenu = document.querySelector("#layout-menu");
        const horzMenuClasses = [
            "layout-menu-horizontal",
            "menu",
            "menu-horizontal",
            "container-fluid",
            "flex-grow-0",
        ];
        const vertMenuClasses = ["layout-menu", "menu", "menu-vertical"];
        const horzMenuWrapper = document.querySelector(
            ".menu-horizontal-wrapper",
        );
        const menuInner = document.querySelector(".menu-inner");
        const brand = document.querySelector(".app-brand");
        const menuToggler = document.querySelector(".layout-menu-toggle");
        const activeMenuItems = document.querySelectorAll(
            ".menu-inner .active",
        );
        /* const layoutPage = document.querySelector('.layout-page')
    const layoutContainer = document.querySelector('.layout-container')
    const content = document.querySelector('.container-fluid') */

        // const { PerfectScrollbar } = window

        if (menu === "vertical") {
            this._horizontal = false;
            asideMenuWrapper.insertBefore(brand, horzMenuWrapper);
            asideMenuWrapper.insertBefore(menuInner, horzMenuWrapper);
            asideMenuWrapper.classList.add("flex-column", "p-0");
            asideMenu.classList.remove(...asideMenu.classList);
            asideMenu.classList.add(...vertMenuClasses, this._menuBgClass);
            brand.classList.remove("d-none", "d-lg-flex");
            menuToggler.classList.remove("d-none");
            // if (PerfectScrollbar !== undefined) {
            //   this._psScroll = new PerfectScrollbar(document.querySelector('.menu-inner'), {
            //     suppressScrollX: true,
            //     wheelPropagation: !Menu._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
            //   })
            // }

            menuInner.classList.add("overflow-auto");

            // Add open class to active items
            for (let i = 0; i < activeMenuItems.length - 1; ++i) {
                activeMenuItems[i].classList.add("open");
            }
        } else {
            this._horizontal = true;
            navbar.children[0].insertBefore(brand, navbarCollapse);
            brand.classList.add("d-none", "d-lg-flex");
            horzMenuWrapper.appendChild(menuInner);
            asideMenuWrapper.classList.remove("flex-column", "p-0");
            asideMenu.classList.remove(...asideMenu.classList);
            asideMenu.classList.add(...horzMenuClasses, this._menuBgClass);
            menuToggler.classList.add("d-none");
            menuInner.classList.remove("overflow-auto");

            // if (PerfectScrollbar !== undefined && this._psScroll !== null) {
            //   this._psScroll.destroy()
            //   this._psScroll = null
            // }

            // Remove open class from active items
            for (let i = 0; i < activeMenuItems.length; ++i) {
                activeMenuItems[i].classList.remove("open");
            }
        }

        this._bindEvents();
    }

    destroy() {
        if (!this._el) return;

        this._unbindEvents();

        const items = this._el.querySelectorAll(".menu-item");
        for (let i = 0, l = items.length; i < l; i++) {
            Menu._unbindAnimationEndEvent(items[i]);
            items[i].classList.remove("menu-item-animating");
            items[i].classList.remove("open");
            items[i].style.overflow = null;
            items[i].style.height = null;
        }

        const menus = this._el.querySelectorAll(".menu-menu");
        for (let i2 = 0, l2 = menus.length; i2 < l2; i2++) {
            menus[i2].style.marginRight = null;
            menus[i2].style.marginLeft = null;
        }

        this._el.classList.remove("menu-no-animation");

        if (this._wrapper) {
            this._prevBtn.parentNode.removeChild(this._prevBtn);
            this._nextBtn.parentNode.removeChild(this._nextBtn);
            this._wrapper.parentNode.insertBefore(this._inner, this._wrapper);
            this._wrapper.parentNode.removeChild(this._wrapper);
            this._inner.style.marginLeft = null;
            this._inner.style.marginRight = null;
        }

        this._el.menuInstance = null;
        delete this._el.menuInstance;

        this._el = null;
        this._horizontal = null;
        this._animate = null;
        this._accordion = null;
        this._showDropdownOnHover = null;
        this._closeChildren = null;
        this._rtl = null;
        this._onOpen = null;
        this._onOpened = null;
        this._onClose = null;
        this._onClosed = null;
        if (this._scrollbar) {
            this._scrollbar.destroy();
            this._scrollbar = null;
        }
        this._inner = null;
        this._prevBtn = null;
        this._wrapper = null;
        this._nextBtn = null;
    }
}

window.Menu = Menu;
export { Menu };