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

test("SplitPane exposes one controlled accessible separator", () => {
  const markup = renderToStaticMarkup(createElement(SplitPane, {
    primary: createElement("div", null, "Видео"),
    secondary: createElement("div", null, "3D"),
    primarySize: 64,
    onPrimarySizeChange: () => {},
    minPrimarySize: 25,
    minSecondarySize: 30,
    separatorLabel: "Изменить ширину представлений",
  }));

  assert.match(markup, /class="nodedc-split-pane"/);
  assert.match(markup, /role="separator"/);
  assert.match(markup, /aria-orientation="vertical"/);
  assert.match(markup, /aria-valuemin="25"/);
  assert.match(markup, /aria-valuemax="70"/);
  assert.match(markup, /aria-valuenow="64"/);
  assert.match(markup, /aria-valuetext="64% \/ 36%"/);
});

test("SplitPane can keep panel ownership stable without an inactive separator", () => {
  const markup = renderToStaticMarkup(createElement(SplitPane, {
    primary: createElement("div", null, "Видео"),
    secondary: createElement("div", null, "3D"),
    primarySize: 100,
    onPrimarySizeChange: () => {},
    separatorLabel: "Изменить ширину представлений",
    resizable: false,
  }));
  assert.match(markup, /data-pane="primary"/);
  assert.match(markup, /data-pane="secondary"/);
  assert.doesNotMatch(markup, /role="separator"/);
});

test("SplitPane is registered, documented, cataloged and keyboard-addressable", async () => {
  const [component, styles, registrySource, docs, catalog] = await Promise.all([
    readFile(new URL("../packages/ui-react/src/SplitPane.tsx", 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"),
    readFile(new URL("../apps/catalog/src/CatalogApp.tsx", import.meta.url), "utf8"),
  ]);
  const registry = JSON.parse(registrySource);
  const entry = registry.components.find((item) => item.id === "split-pane");

  assert.ok(entry?.exports.includes("SplitPane"));
  assert.deepEqual(entry?.variants, ["vertical", "horizontal"]);
  assert.match(component, /event\.key === "Home"/);
  assert.match(component, /event\.key === "End"/);
  assert.match(component, /setPointerCapture/);
  assert.match(component, /activePointerIdRef\.current !== event\.pointerId/);
  assert.match(component, /role="separator"/);
  assert.match(styles, /\.nodedc-split-pane__separator:focus-visible::before/);
  assert.match(docs, /## SplitPane/);
  assert.match(catalog, /<SplitPane/);
});