(function initMyronNavigationDesign(global) {
  "use strict";

  function onReady(callback) {
    if (global.document.readyState === "loading") {
      global.document.addEventListener("DOMContentLoaded", callback, { once: true });
      return;
    }
    callback();
  }

  function setupPanels() {
    var sheet = global.document.getElementById("navigation-configure-sheet");
    if (!sheet) {
      return;
    }
    var panels = Array.prototype.slice.call(sheet.querySelectorAll("[data-mc-navigation-config-panel]"));
    var empty = sheet.querySelector("[data-mc-visual-section-empty]");

    function activate(versionId) {
      var matched = false;
      panels.forEach(function toggle(panel) {
        var active = panel.getAttribute("data-navigation-version-id") === versionId;
        panel.hidden = !active;
        panel.setAttribute("aria-hidden", active ? "false" : "true");
        matched = matched || active;
      });
      if (empty) {
        empty.hidden = matched;
        empty.setAttribute("aria-hidden", matched ? "true" : "false");
      }
    }

    activate("");
    global.document.querySelectorAll("[data-mc-navigation-version]").forEach(function bind(button) {
      button.addEventListener("click", function onClick() {
        activate(button.getAttribute("data-mc-navigation-version") || "");
      });
    });
  }

  onReady(setupPanels);
})(window);
