import { chromium } from 'playwright';
/* Does the panel start at the title and end with the list, and hold that box across steps? */
const [,, url, prefix, width = '1440', height = '900'] = process.argv;
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: Number(width), height: Number(height) } });
await page.goto(url, { waitUntil: 'networkidle' });
const count = await page.evaluate(() => document.querySelectorAll('[data-trigger]').length);
const rows = [];
for (let i = 0; i < count; i++) {
  await page.evaluate((i) => {
    const t = document.querySelectorAll('[data-trigger]')[i];
    const r = t.getBoundingClientRect();
    window.scrollTo(0, window.scrollY + r.top + r.height / 2 - window.innerHeight / 2);
  }, i);
  await page.waitForTimeout(900);
  rows.push(await page.evaluate(() => {
    const title = document.querySelector('.how__title').getBoundingClientRect();
    const steps = Array.from(document.querySelectorAll('[data-step]'));
    const last = steps[steps.length - 1].getBoundingClientRect();
    const fig = document.querySelector('[data-figure][data-active]').getBoundingClientRect();
    const sticky = document.querySelector('.how__sticky').getBoundingClientRect();
    const container = document.querySelector('.how__sticky');
    const cs = getComputedStyle(container);
    const rightEdge = sticky.right - parseFloat(cs.paddingRight);
    return {
      active: steps.findIndex((s) => s.hasAttribute('data-active')),
      panel: `${Math.round(fig.width)}x${Math.round(fig.height)}`,
      topVsTitle: Math.round(fig.top - title.top),
      bottomVsList: Math.round(fig.bottom - last.bottom),
      rightVsEdge: Math.round(fig.right - rightEdge),
      listFits: Math.round(sticky.bottom - last.bottom),
      spaceAbove: Math.round(fig.top - sticky.top),
      spaceBelow: Math.round(sticky.bottom - fig.bottom),
    };
  }));
  await page.screenshot({ path: `${prefix}-${i}.png` });
}
console.table(rows);
await browser.close();