const SMcreateElement = (tagName, attributes) => {
  const element = document.createElement(tagName)

  if (typeof attributes === 'object') {
    for (let i in attributes) {
      if (i === 'text') {
        element.textContent = attributes[i]
      } else if (i === 'html') {
        element.innerHTML = attributes[i]
      } else {
        element.setAttribute(i, attributes[i])
      }
    }
  }

  return element
}

(function() {
  const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
  const sideMenuOpener = SMcreateElement('button', {
    'class': 'side-menu-opener',
    'arial-label': t('side_menu', 'Toggle the menu'),
    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
  })
  const sideMenu = SMcreateElement('div', {id: 'side-menu'})

  const body = document.querySelector('body')
  const html = document.querySelector('html')
  const nextcloud = document.querySelector('#nextcloud')
  const logo = document.querySelector('.header-left .logo')

  const isTouchDevice = window.matchMedia("(pointer: coarse)").matches

  window.targetBlankApps = []
  window.topMenuApps = ["external_index1"]
  window.topSideMenuApps = ["external_index1"]
  window.menuAppsOrder = ["dashboard","files","photos","deck","activity","tasks","calendar","maps","quicknotes","notes","spreed","integration_zammad","external_index1"]
  window.topMenuAppsMouseOverHiddenLabel = 0

  
  const sideMenuFocus = () => {
    let a = document.querySelector('#side-menu .side-menu-app.active a')
      || document.querySelector('#side-menu .side-menu-app a')

    if (a) {
      a.focus()
    }
  }

  document.querySelector('body').addEventListener('side-menu.apps', (e) => {
    const apps = e.detail.apps;

                })

  body.addEventListener('side-menu.ready', () => {
    const sideMenu = document.querySelector('#side-menu')
    const headerMenuOpener = document.querySelector('#header .side-menu-opener')
    const sideMenuOpener = document.querySelectorAll('#side-menu .side-menu-opener')

    if (!headerMenuOpener) {
      return
    }

    
    headerMenuOpener.addEventListener('click', () => {
      sideMenu.classList.add('open')
      headerMenuOpener.blur()
      sideMenuFocus()
    })

    for (let opener of sideMenuOpener) {
      opener.addEventListener('click', () => {
                  sideMenu.classList.remove('open')
              })
    }

    document.addEventListener('keydown', (e) => {
      var key = e.key || e.keyCode

      if ((key === 'o' || key === 79) && e.ctrlKey === true) {
        e.preventDefault()

        sideMenu.classList.toggle('open')
        sideMenuFocus()
      }
    })

    const sideMenuObserver = new MutationObserver((e) => {
      if (body.getAttribute('id') !== 'body-settings') {
        return
      }

      body.classList.toggle('body-settings-side-menu', sideMenu.classList.contains('open'))
    })

    sideMenuObserver.observe(sideMenu, {
      attributes: true,
      attributeFilter: ['class'],
      childList: false,
      characterData: false
    })
  })

  body.appendChild(sideMenuContainer)
  sideMenuContainer.appendChild(sideMenu)

      PageLoader()
  
  if (nextcloud) {
    if (logo && logo.parentNode !== nextcloud) {
      nextcloud.appendChild(logo)
    }

          nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
      }
})();