import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";
import test from "node:test";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { Icon } from "../packages/ui-react/dist/index.js";

test("only registered playback glyphs are filled", async () => {
  const registry = JSON.parse(await readFile(
    new URL("../registry/icons.json", import.meta.url),
    "utf8",
  ));
  const names = registry.groups.flatMap((group) => group.names);
  const filledNames = new Set(registry.filledNames);

  assert.deepEqual([...filledNames], ["play", "stop"]);
  assert.equal(new Set(names).size, names.length);

  for (const name of names) {
    const markup = renderToStaticMarkup(createElement(Icon, { name }));
    const rootTag = markup.slice(0, markup.indexOf(">") + 1);
    if (filledNames.has(name)) {
      assert.match(rootTag, /fill="currentColor"/, `${name} must be filled`);
      assert.match(rootTag, /stroke-width="0"/, `${name} must not retain an outline`);
    } else {
      assert.match(rootTag, /fill="none"/, `${name} must remain outline-only`);
      assert.doesNotMatch(rootTag, /fill="currentColor"/, `${name} must not be filled`);
    }
  }
});