import { catalogueFamilies, getCatalogueFamilyById } from "./catalog.mjs";
import { buildCatalogueFamilyViewModel } from "./site-model.mjs";

const getSequencerElements = () => ({
  stage: document.querySelector("#format-stage"),
  buttons: [...document.querySelectorAll("#format-controls [data-format-id]")],
  steps: [...document.querySelectorAll("[data-heat-step]")],
  sequenceLabel: document.querySelector("#heat-sequence-label"),
  name: document.querySelector("#active-format-name"),
  description: document.querySelector("#active-format-description"),
});

const setActiveFormat = (id, elements) => {
  const family = getCatalogueFamilyById(id);
  if (!family || !elements.stage) return;

  const view = buildCatalogueFamilyViewModel(family);
  const activeIndex = catalogueFamilies.findIndex((item) => item.id === id);

  elements.stage.dataset.activeFormat = view.id;
  elements.name.textContent = view.name;
  elements.description.textContent = view.description;
  if (elements.sequenceLabel) {
    elements.sequenceLabel.textContent = `${String(activeIndex + 1).padStart(2, "0")} / 04 · ${view.shortName}`;
  }

  for (const button of elements.buttons) {
    button.setAttribute("aria-pressed", String(button.dataset.formatId === view.id));
  }

  for (const [index, step] of elements.steps.entries()) {
    step.dataset.state = index < (activeIndex + 1) * 4 ? "active" : "idle";
  }
};

const initFormatSequencer = () => {
  const elements = getSequencerElements();
  if (!elements.stage || elements.buttons.length === 0) return;

  for (const [index, button] of elements.buttons.entries()) {
    button.addEventListener("click", () => setActiveFormat(button.dataset.formatId, elements));
    button.addEventListener("keydown", (event) => {
      if (!["ArrowLeft", "ArrowRight"].includes(event.key)) return;

      event.preventDefault();
      const direction = event.key === "ArrowRight" ? 1 : -1;
      const nextIndex = (index + direction + elements.buttons.length) % elements.buttons.length;
      elements.buttons[nextIndex].focus();
      elements.buttons[nextIndex].click();
    });
  }

  setActiveFormat("cube", elements);
};

const initMobileMenu = () => {
  const menu = document.querySelector(".mobile-menu");
  if (!menu) return;

  for (const link of menu.querySelectorAll("a")) {
    link.addEventListener("click", () => menu.removeAttribute("open"));
  }
};

initFormatSequencer();
initMobileMenu();