import { chromium } from 'playwright';
/* For every grid object: does the drawn geometry fit inside its viewBox, and is the drawing
   centred in the space its card gives it. */
const [,, url, selector, width = '1440'] = process.argv;
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: Number(width), height: 1000 } });
await page.goto(url, { waitUntil: 'networkidle' });
const rows = await page.evaluate((sel) => {
  return Array.from(document.querySelectorAll(sel)).map((svg, i) => {
    const vb = svg.viewBox.baseVal;
    const b = svg.querySelector('g').getBBox();
    const overflow = {
      left: +(vb.x - b.x).toFixed(1),
      right: +((b.x + b.width) - (vb.x + vb.width)).toFixed(1),
      top: +(vb.y - b.y).toFixed(1),
      bottom: +((b.y + b.height) - (vb.y + vb.height)).toFixed(1),
    };
    const clipped = Object.values(overflow).some((v) => v > 0.5);
    /* Vertical centring: the gap above the drawing vs the gap below it, inside the card. */
    const card = svg.closest('li');
    const title = card.querySelector('h2, h3');
    const body = card.querySelector('p');
    const r = svg.getBoundingClientRect();
    const above = +(r.top - title.getBoundingClientRect().bottom).toFixed(1);
    const below = +(body.getBoundingClientRect().top - r.bottom).toFixed(1);
    return { i, viewBox: `${vb.x} ${vb.y} ${vb.width} ${vb.height}`, clipped, overflow, above, below, offBy: +(above - below).toFixed(1) };
  });
}, selector);
console.table(rows);
console.log('any clipped:', rows.some((r) => r.clipped));
await browser.close();