/* eslint-disable @typescript-eslint/no-explicit-any */
/**
 * The notebook's section tabs (FineNotes draws them as stubs on the view's
 * right edge, the current one pulled out). In Obsidian the edge is the pane
 * beside other panes; in this page it is the window's edge, where a stub of
 * a few pixels reads as cut off. So the playground decides from the room
 * beside the page:
 *
 * - room for a whole tab (the page at fit width on a wide screen): every tab
 *   shows its label (`play-tabs-open`);
 * - too little room on a narrow pane (a phone): the tabs are hidden, so
 *   nothing covers the page; the page sidebar's Contents tab lists the same
 *   sections (`play-tabs-hidden`);
 * - otherwise (zoomed in on a wider pane): FineNotes' own stubs.
 *
 * Original code for this site. GPL-3.0-or-later.
 */

/** The widest a whole tab gets here (playground.css), and a little air. */
const WHOLE_TAB = 210 + 10;
/** A pane narrower than this is a phone: its tabs would cover the paper. */
const NARROW = 700;

export function watchSectionTabs(view: any, root: HTMLElement): void {
  let last = "";
  const check = (): void => {
    const surface = view.surface;
    if (!surface) return;
    const width: number = surface.cssW ?? root.clientWidth;
    const scale: number = surface.scale;
    const box = surface.pageLayout?.boxes?.[surface.currentPage];
    let room = width;
    if (box && scale > 0) room = width - (surface.offsetX + (box.x + box.width) * scale);
    const state = room >= WHOLE_TAB ? "open" : width < NARROW ? "hidden" : "";
    if (state === last) return;
    last = state;
    root.classList.toggle("play-tabs-open", state === "open");
    root.classList.toggle("play-tabs-hidden", state === "hidden");
  };
  check();
  window.setInterval(check, 300);
  window.addEventListener("resize", check);
}