((Drupal, $, once) => {
  Drupal.behaviors.responsiveMenu = {
    attach(context) {
      $(
        once('responsiveMenu', 'html', context).forEach(() => {
          // START SINGLE RUN CODE

          // Initialize the mmenu
          new Mmenu( '#mobile-menu', {
              'theme': 'white',
              'dragOpen': false,
              'slidingSubmenus': true,
              'extensions': [
                  'pagedim-black',
                  'fx-menu-slide',
                  'pageshadow',
                  'effect-zoom-menu',
                  'effect-zoom-panels'
              ],

              'pageScroll': {
                  'scroll': true,
                  'update': true
              },

              'offCanvas': {
                  'position': 'right-front',
                  'clone': true,
                  'screenReader': {
                    "closeMenu": 'Close menu',
                    "openMenu": 'Open menu',
                    'toggleSubmenu': 'Toggle submenu',
                    'aria': true ,
                    'text': true
                  },
              },

              'classNames': {
                  'selected': 'is-active'
              },

              'setSelected': {
                  'current': 'detect',
                  'hover': true,
                  'parent': false
              },

              'navbars': [
                {
                  'position': 'top',
                  'use': true,
                  'content': [
                      'prev',
                      'title',
                      'close'
                  ]
                }
              ],
              'navbar': {
                  'add': true,
                  'title': "<a href='https://www.samhsa.gov/'>Home</a>",
                  'titleLink': 'parent'
                },

              'keyboardNavigation' : {
                  'enable'	: true,
                  'enhance'	: true
              },

              'onClick': {
                  'close': false,
                  'preventDefault': true,
                  'setSelected'   : true
                }
          });

          $(document).on("click", "#mobile-menu-btn", function() {
            const activeTrailListItem = $("li.mm-listitem.menu-item--active-trail .is-active.mm-listitem__text:last");
            const activeTrailPanel = activeTrailListItem.parents("div.mm-panel");
            const panelsWrapper = activeTrailPanel.parents("div.mm-panels");
            const backArrow = panelsWrapper.siblings(".mm-navbars.mm-navbars--top").find(".mm-btn.mm-hidden");
            const parentTitle = activeTrailPanel.find(".mm-navbar__title span");
            const titleText = parentTitle.text();
            const backId = activeTrailPanel.find("a.mm-btn.mm-btn--prev.mm-navbar__btn").attr("href");
            const titleSpan = $("<span>").text(titleText);

            if (activeTrailListItem.length > 0) {

              // Update title
              $(".mm-navbars--top .mm-navbar__title").empty().append(titleSpan).addClass("title");

              activeTrailPanel.addClass("mm-panel--opened").removeAttr("inert");
              const activePanel = activeTrailPanel.addClass("mm-panel--opened").removeAttr("inert");

              // Handle backArrow
              backArrow.addClass("mm-btn--prev mm-navbar__btn")
                .removeClass("mm-hidden")
                .attr("href", `${backId}`)
                .attr("aria-label", "Close submenu");

              // Handle panels
              activePanel.siblings(`div.mm-panel.mm-panel--opened[id="${backId}"]`)
                  .addClass("mm-panel--parent")
                  .removeClass("mm-panel--opened")
                  .attr("inert", "true");

              const firstPanel = $('.mm-panels .mm-panel:first');
              if (firstPanel.is(activePanel)) {
                firstPanel.addClass('mm-panel--opened');
                firstPanel.parents(".mm-panels")
                  .siblings(".mm-navbars.mm-navbars--top")
                  .find(".mm-btn--prev.mm-navbar__btn")
                  .addClass("mm-hidden");
              } else {
                firstPanel.removeClass('mm-panel--opened');
              }

              backArrow.click(() => {
                activeTrailPanel.addClass("mm-panel--highest").removeClass("mm-panel--opened").addAttr("inert");
              });

            }
          });
      // END SINGLE RUN CODE
    })
  );
},
};
})(Drupal, jQuery, once);

// hacky addition to mmenu to make the Data menu item on the home page be blue with a stripe
document.addEventListener("DOMContentLoaded", function() {
  // Get the current page URL
  var currentPageURL = window.location.href;
  // Check if the current page URL ends with "/data/"
  if (currentPageURL.endsWith("/data/")) {
    // Select the Data element and add the class to make it blue and stripey
    document.getElementById("mm-76").classList.add("menu-item--active-trail");
  }
});