define('menu-ui-translation-keys', {
  prefix: 'menu.ui.',
  keys: [
    "openSubMenu",
    "closeSubMenu"
  ]
});
require(['jquery','xwiki-l10n!menu-ui-translation-keys'], function($, l10n) {
  // It's not possible to write a CSS selector that targets list items containing lists so we rely on JavaScript.
  // The 'dropdown' CSS class is used only to display the down/left arrow.
  // All nodes on the tree.
  $('.menu-horizontal ul , .menu-vertical ul')
    .attr('role', 'menu');
  // All leaves on the tree.
  $('.menu-horizontal li, .menu-vertical li')
    .attr('role', 'menuitem');
  $('.menu-horizontal li ul, .menu-vertical li ul')
    .parent()
    .addClass('xDropdown');
  // Make sure the menu separators are really empty.
  var menus = $('.menu-horizontal, .menu-vertical');
  menus.find('li > br:first-child').remove();

  // Add aria attributes to the menu separators.
  menus.find('li')
    .filter(function() {return this.textContent.trim() === ""; })
    .attr('role', 'separator')
    .attr('aria-hidden', 'true');

  // Vertical menus are initially expanded
  $('.menu-vertical.collapsible').each(function() {
    var open = $(this).hasClass('open');
    $(this).find('li ul').each(function() {
      $(this).addClass('xDropdown-menu').parent().addClass('xDropdown' + (open ? ' open' : ''));
    });
  });

  function setDropdownButtonTitle(dropDownButton) {
    var xDropdown = $(dropDownButton).parent().parent();
    if($(xDropdown).hasClass('open')) {
      $(dropDownButton).attr('title', l10n['closeSubMenu']);
      $(xDropdown).attr('aria-expanded', "true");
    } else {
      $(dropDownButton).attr('title', l10n['openSubMenu']);
      $(xDropdown).attr('aria-expanded', "false");
    }
  }

  $('.xDropdown').each(function() {
    var dropDownHeader = this.ownerDocument.createElement("div");
    $(dropDownHeader).addClass("xDropdown-header");
    var dropDownButton = this.ownerDocument.createElement("button");
    $(dropDownButton).addClass("xDropdown-header-toggle");
    setDropdownButtonTitle(dropDownButton);
    dropDownButton.addEventListener('click',function() {
      //Swaps the state of the submenu.
      var xDropdown = $(this).parent().parent();
      xDropdown.toggleClass('open');
      setDropdownButtonTitle(dropDownButton);
    });
      let dropDownContent = $(this).contents();
      // We put all the content of the entry in the header,
      // except for the last one which is the content of the dropdown. This dropdown stays where it is.
      for (let index = 0; index < dropDownContent.length - 1 ; index++) {
        let item = dropDownContent[index];
        dropDownHeader.append(item);
      }
      dropDownHeader.append(dropDownButton);
      $(this).prepend(dropDownHeader);
      $(dropDownHeader).next().addClass('xDropdown-menu');
  });

  $('.xDropdown-menu').each(function() {
     this.addEventListener('keyup', function(event) {
       if (event.key === 'Escape') {
         // We change the state of the parent xDropdown
         this.parentNode.classList.remove('open');
         // We set the focus on the toggle button of the section we just collapsed
         this.parentNode.querySelector(':scope > .xDropdown-header > .xDropdown-header-toggle').focus();
       }
       event.stopPropagation();
     });
  });

  $('.menu-horizontal .xDropdown').each(function() {
    // In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
    this.addEventListener("mouseover", function() {
      $(this).addClass('open');
      setDropdownButtonTitle(this.firstChild.lastChild);
    });
    this.addEventListener("mouseout", function() {
      $(this).removeClass('open');
      setDropdownButtonTitle(this.firstChild.lastChild);
    });
  });

  // In case of horizontal responsive menus, make sub-submenus in the navbar work on mobile devices
  $(document).on('touchstart.dropdown.data-api', '.dropdown-submenu > a', function (event) {
    event.preventDefault();
  });
})
