/* Throwaway: four pages, and what that stray placeholder is. */
import { launch, withFreshUser, createNotebook, createNote, OUT } from "./lib.mjs";

const browser = await launch();
const s = await withFreshUser(browser, "probe");
const p = s.page;
p.on("pageerror", (e) => console.log("PAGEERROR", String(e)));

await p.setViewportSize({ width: 1680, height: 950 });
await createNotebook(p, "Papier");
await createNote(p);
await p.waitForTimeout(1500);
await p.locator(".ProseMirror").click();
// Paste rather than type: typing this much loses keystrokes and says nothing
// about the layout, which is what is being looked at here.
await p.evaluate(() => {
  const text = Array.from({ length: 160 }, (_, i) => `Absatz ${i + 1}: Dichtungen altern durch Wärme und Zeit.`).join("\n");
  const dt = new DataTransfer();
  dt.setData("text/plain", text);
  document.querySelector(".ProseMirror").dispatchEvent(
    new ClipboardEvent("paste", { clipboardData: dt, bubbles: true, cancelable: true })
  );
});
await p.waitForTimeout(4000);

console.log(
  JSON.stringify(
    await p.evaluate(() => {
      const pm = document.querySelector(".ProseMirror");
      const pmTop = pm.getBoundingClientRect().top;
      const sheets = [...document.querySelectorAll("[data-page-sheet]")];
      const gaps = sheets.slice(0, -1).map((el, i) => ({
        from: el.getBoundingClientRect().bottom - pmTop,
        to: sheets[i + 1].getBoundingClientRect().top - pmTop,
      }));
      const inGap = [];
      for (const el of pm.children) {
        if (el.classList.contains("ne-page-spacer")) continue;
        const r = el.getBoundingClientRect();
        if (r.height === 0) continue;
        const top = r.top - pmTop,
          bottom = r.bottom - pmTop;
        for (const g of gaps) {
          if (bottom > g.from + 0.5 && top < g.to - 0.5) inGap.push((el.textContent || "").slice(0, 24));
        }
      }
      const placeholder = [...pm.querySelectorAll("[data-placeholder]")].map((el) => ({
        text: (el.textContent || "").slice(0, 20),
        first: el === pm.firstElementChild,
        top: Math.round(el.getBoundingClientRect().top - pmTop),
      }));
      return {
        blocks: [...pm.children].filter((c) => !c.classList.contains("ne-page-spacer")).length,
        height: pm.scrollHeight,
        sheets: sheets.length,
        spacers: [...document.querySelectorAll(".ne-page-spacer")].map((el) => el.offsetHeight),
        inGap,
        placeholder,
        position: document.querySelector("[data-note-position]")?.textContent,
        margins: (() => {
          const sheet = sheets[0].getBoundingClientRect();
          const col = pm.getBoundingClientRect();
          return {
            sheetW: Math.round(sheet.width),
            colW: Math.round(col.width),
            left: Math.round(col.left - sheet.left),
            right: Math.round(sheet.right - col.right),
          };
        })(),
      };
    }),
    null,
    1
  )
);
await p.screenshot({ path: `${OUT}/probe.png` });
await s.cleanup();
await browser.close();