export {};

const onReady = (fn: () => void): void => {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", fn, { once: true });
    return;
  }

  fn();
};

const isMobileViewport = (): boolean => window.matchMedia("(max-width: 1023px)").matches;

const initSidebarTransitions = (): void => {
  requestAnimationFrame(() => {
    document.documentElement.classList.add("sidebar-ready");
  });
};

const initMobileMenu = (): void => {
  const menu = document.getElementById("mobile-menu");
  const backdrop = document.getElementById("mobile-menu-backdrop");
  const toggle = document.querySelector("[data-mobile-menu-toggle]");

  if (!(menu instanceof HTMLElement)) return;
  if (!(backdrop instanceof HTMLElement)) return;
  if (!(toggle instanceof HTMLElement)) return;

  const body = document.body;
  let lastFocused: HTMLElement | null = null;

  const setOpen = (nextOpen: boolean): void => {
    menu.dataset.mobileOpen = nextOpen ? "true" : "false";
    backdrop.dataset.mobileOpen = nextOpen ? "true" : "false";
    backdrop.classList.toggle("hidden", !nextOpen);
    toggle.setAttribute("aria-expanded", nextOpen ? "true" : "false");
    body.classList.toggle("overflow-hidden", nextOpen);
  };

  const openMenu = (): void => {
    if (!isMobileViewport()) return;
    if (menu.dataset.mobileOpen === "true") return;

    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
    setOpen(true);

    const focusTarget = menu.querySelector<HTMLElement>(
      'a, button, input, [tabindex]:not([tabindex="-1"])',
    );
    focusTarget?.focus();
  };

  const closeMenu = (): void => {
    if (menu.dataset.mobileOpen !== "true") return;
    setOpen(false);
    lastFocused?.focus();
  };

  toggle.addEventListener("click", () => {
    if (menu.dataset.mobileOpen === "true") {
      closeMenu();
      return;
    }

    openMenu();
  });

  backdrop.addEventListener("click", closeMenu);

  document.addEventListener("keydown", (event) => {
    if (event.key !== "Escape") return;
    if (menu.dataset.mobileOpen !== "true") return;
    event.preventDefault();
    closeMenu();
  });

  menu.querySelectorAll<HTMLElement>("a, button").forEach((el) => {
    el.addEventListener("click", () => {
      if (!isMobileViewport()) return;
      closeMenu();
    });
  });

  window.addEventListener("resize", () => {
    if (!isMobileViewport()) {
      setOpen(false);
    }
  });
};

onReady(() => {
  initSidebarTransitions();
  initMobileMenu();
});