import { test } from "node:test";
import assert from "node:assert/strict";
import * as React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { resolveVerdicts } from "../../lib/report/verdicts";
import { VerdictChip, VerdictTally } from "./VerdictChip";

(globalThis as { React?: typeof React }).React = React;
const h = React.createElement;

const styles = resolveVerdicts({ PARTLY: { label: "Half true", color: "#123456" } });

test("a chip: the verdict's label, its colour as the chip's mark, a count when given", () => {
  const html = renderToStaticMarkup(h(VerdictChip, { verdict: "PARTLY", style: styles.PARTLY, count: 3 }));
  assert.match(html, /data-verdict="PARTLY"/);
  assert.match(html, /style="--verdict:#123456"/);
  assert.ok(html.includes("Half true"));
  assert.match(html, />3<\/span>/);
});

test("a tally: one chip per verdict given, nothing for none", () => {
  const html = renderToStaticMarkup(
    h(VerdictTally, {
      tally: [
        { verdict: "CORROBORATED", count: 2 },
        { verdict: "CONTRADICTED", count: 1 },
      ],
      styles,
    }),
  );
  assert.deepEqual(
    [...html.matchAll(/data-verdict="([A-Z_]+)"/g)].map((m) => m[1]),
    ["CORROBORATED", "CONTRADICTED"],
  );
  assert.ok(html.includes("Corroborated"));
  assert.equal(renderToStaticMarkup(h(VerdictTally, { tally: [], styles })), "");
});