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 }