import { positionAsTooltip } from "./tooltip.js";

let activeMenuBar = null;

export function initializeMenuBar() {
  document.querySelectorAll(".menu-bar").forEach(menuBar => {
    menuBar.querySelectorAll("button").forEach(button => {
      button.setAttribute("tabindex", "-1");
      button.replaceChildren(createAltSpan(button, button.innerText));
      button.addEventListener("click", e => {
        menuBar.classList.remove("active");
        menuBar.querySelectorAll(".active")
            .forEach(elem => elem.classList.remove("active"));
        activeMenuBar = null;
      });
      button.addEventListener("mouseenter", () => {
        if (!activeMenuBar) return;

        button.parentElement.querySelectorAll(".active")
            .forEach(elem => elem.classList.remove("active"));
      });
    });
    menuBar.querySelectorAll("[data-section]").forEach(section => {
      const button = document.createElement("button");
      button.setAttribute("tabindex", "-1");
      button.dataset.forSection = "";
      button.appendChild(createAltSpan(section, section.dataset.section));
      section.parentElement.insertBefore(button, section);

      section.addEventListener("click", e => e.stopPropagation());
      button.addEventListener("click", e => e.stopPropagation());

      function updateActive() {
        if (!activeMenuBar) return;

        button.parentElement.querySelectorAll(".active")
            .forEach(elem => elem.classList.remove("active"));
        button.classList.add("active");
        section.classList.add("active");
        positionAsTooltip(button, section, {
          horizontal: section.parentElement === menuBar ? "left" : "right",
          vertical: section.parentElement === menuBar ? "bottom" : "top",
        });
      }

      if (section.parentElement === menuBar) {
        button.addEventListener("click", () => {
          if (section.classList.contains("active")) {
            menuBar.classList.remove("active");
            menuBar.querySelectorAll(".active")
                .forEach(elem => elem.classList.remove("active"));
            activeMenuBar = null;
          } else {
            menuBar.querySelectorAll(".active")
                .forEach(elem => elem.classList.remove("active"));
            menuBar.classList.add("active");
            section.classList.add("active");
            window.addEventListener("click", handleGlobalClick);
            activeMenuBar = menuBar;
            updateActive();
          }
        });
      }
      button.addEventListener("mouseenter", updateActive);
    });
  });

  // TODO: keyboard navigation with alt and arrow keys
}


function handleGlobalClick() {
  console.log("Global clicked");
  if (!activeMenuBar) return;
  activeMenuBar.classList.remove("active");
  activeMenuBar.querySelectorAll(".active")
      .forEach(section => section.classList.remove("active"));
  activeMenuBar = null;
  window.removeEventListener("click", handleGlobalClick);
}

function createAltSpan(element, text) {
  const altKey = element.dataset.alt;

  if (!altKey) {
    const span = document.createElement("span");
    span.appendChild(document.createTextNode(text));
    return span;
  }

  const [ , before, key, after ] = new RegExp(`^(.*)(${altKey})(.*)$`, "i").exec(text);
  const span = document.createElement("span");

  if (before) {
    span.appendChild(document.createTextNode(before));
  }

  const underlineSpan = document.createElement("span");
  underlineSpan.innerText = key;
  underlineSpan.classList.add("alt-key");
  span.appendChild(underlineSpan);

  if (after) {
    span.appendChild(document.createTextNode(after));
  }

  return span;
}