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 { Button, SegmentedControl } from "../packages/ui-react/dist/index.js";

test("dense viewer controls remain a public Button and SegmentedControl contract", async () => {
  const button = renderToStaticMarkup(createElement(Button, { size: "dense" }, "Source points"));
  const segmented = renderToStaticMarkup(createElement(SegmentedControl, {
    size: "dense",
    value: "source",
    items: [{ label: "Source points", value: "source" }],
    label: "Viewer layer",
    onChange: () => {},
  }));
  const [tokens, styles, registrySource, docs] = await Promise.all([
    readFile(new URL("../packages/tokens/tokens.css", import.meta.url), "utf8"),
    readFile(new URL("../packages/ui-core/styles.css", import.meta.url), "utf8"),
    readFile(new URL("../registry/components.json", import.meta.url), "utf8"),
    readFile(new URL("../docs/COMPONENTS.md", import.meta.url), "utf8"),
  ]);
  const registry = JSON.parse(registrySource);
  const buttonEntry = registry.components.find((component) => component.id === "button");
  const segmentedEntry = registry.components.find((component) => component.id === "segmented-control");

  assert.match(button, /data-size="dense"/);
  assert.match(segmented, /data-size="dense"/);
  assert.ok(buttonEntry?.sizes.includes("dense"));
  assert.ok(segmentedEntry?.sizes.includes("dense"));
  assert.match(tokens, /--nodedc-control-height-dense: 1\.875rem/);
  assert.match(tokens, /--nodedc-font-size-dense: 0\.45rem/);
  assert.match(styles, /\.nodedc-button\[data-size="dense"\]/);
  assert.match(styles, /\.nodedc-segmented\[data-size="dense"\]/);
  assert.match(docs, /size="dense"/);
  assert.match(docs, /viewer/);
});