// Builds a contact sheet of just the batch-7 icons, rendered through the real
// stylesheet, so the result can be screenshotted and eyeballed.
import fs from 'node:fs';
import path from 'node:path';

const ROOT = path.resolve(import.meta.dirname, '..');
const css = fs.readFileSync(path.join(ROOT, 'css', 'ga-icons.css'), 'utf8');
// Slice from the start of the comment, not from the title text, or the first
// section header won't match the split regex and batch 7a gets dropped.
const start = process.argv[2] || 'Batch 7a';
const newBlock = css.slice(css.lastIndexOf('/*', css.indexOf(start)));
const sections = newBlock.split(/\/\* =+ (Batch [78][a-f][^=]*?) =+ \*\//).slice(1);

let out = '';
for (let i = 0; i < sections.length; i += 2) {
  const title = sections[i].trim();
  const names = [...sections[i + 1].matchAll(/^\.ga\.ga-([a-z0-9-]+) \{/gm)].map((m) => m[1]);
  out += `<h2>${title} (${names.length})</h2><div class="grid">`;
  out += names.map((n) => `<figure><i class="ga ga-${n}"></i><figcaption>${n}</figcaption></figure>`).join('');
  out += `</div>`;
}

fs.writeFileSync(
  path.join(import.meta.dirname, 'sheet.html'),
  `<!DOCTYPE html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../css/ga-icons.css">
<style>
  body { font: 12px/1.3 system-ui, sans-serif; background:#fff; color:#111; margin:0; padding:16px; width:1400px; }
  h2 { font-size:14px; margin:18px 0 8px; padding-bottom:4px; border-bottom:2px solid #111; }
  .grid { display:grid; grid-template-columns:repeat(12,1fr); gap:10px 6px; }
  figure { margin:0; text-align:center; }
  figure i { font-size:34px; }
  figcaption { font-size:9px; color:#555; margin-top:3px; word-break:break-all; }
</style></head><body>${out}</body></html>`
);
console.log('sheet.html written');
