// the home banner follows the pointer: an icon shows its page's line from the index pages,
// a section's box shows the section. on touch there's no hover, and a tap fires mouseover
// right before the click, so it would flash a different entry just as the page changes.

const home = document.querySelector<HTMLElement>("[data-home]");
const banner = document.querySelector<HTMLElement>("[data-banner]");
const LAST = "hydrant-last-page";

if (home && banner) {
  const layers = new Map([...banner.querySelectorAll<HTMLElement>("[data-for]")].map((l) => [l.dataset.for!, l]));
  let shown = "";
  const show = (key: string) => {
    if (!layers.has(key)) key = "";
    if (key === shown) return;
    layers.get(shown)?.classList.remove("on");
    layers.get(key)!.classList.add("on");
    shown = key;
  };
  const point = (ev: Event) => {
    const t = ev.target as HTMLElement;
    show(t.closest<HTMLElement>("[data-page]")?.dataset.page ?? t.closest<HTMLElement>("[data-section]")?.dataset.section ?? "");
  };
  if (matchMedia("(hover: hover)").matches) {
    home.addEventListener("mouseover", point);
    home.addEventListener("focusin", point);
    home.addEventListener("mouseleave", () => show(""));
  }

  // the last page you opened stays selected, like a tracker window remembers
  const last = localStorage.getItem(LAST);
  if (last) home.querySelector(`[data-page="${CSS.escape(last)}"]`)?.classList.add("last");
  home.addEventListener("click", (ev) => {
    const a = (ev.target as HTMLElement).closest<HTMLAnchorElement>("[data-page]");
    if (a) localStorage.setItem(LAST, a.dataset.page!);
  });
}

export {};