import { readdirSync, readFileSync } from "node:fs";

import { describe, expect, it } from "vitest";

// The keyboard row of a listbox has one look, ui/AnchoredPopover's `ROVING_HIGHLIGHT`
// (a menu row, a combobox option, the command palette, the Plex typeahead). A listbox that paints its
// own drifted: the palette's `bg-card` row was ~1.07:1 on its glass, and the Plex typeahead carried a
// hand copy of the recipe that would not follow a change to it.
function sources(): Array<[string, string]> {
  const walk = (u: URL, prefix: string): Array<[string, string]> =>
    readdirSync(u, { withFileTypes: true }).flatMap((e) => {
      if (e.isDirectory()) return walk(new URL(`${e.name}/`, u), `${prefix}${e.name}/`);
      if (!/\.tsx?$/.test(e.name) || e.name.includes(".test.")) return [];
      return [
        [`${prefix}${e.name}`, readFileSync(new URL(e.name, u), "utf-8")] as [string, string],
      ];
    });
  return walk(new URL("../", import.meta.url), "");
}

describe("the roving highlight", () => {
  it("is painted only by the recipe in ui/AnchoredPopover", () => {
    const copies = sources()
      .filter(
        ([name]) => name !== "components/ui/AnchoredPopover.tsx" && !name.startsWith("design-lab/"),
      )
      .filter(([, src]) => /(^|[\s"`'])bg-accent\/35(?![\w/-])/.test(src))
      .map(([name]) => name);
    expect(copies).toEqual([]);
  });

  it("is what every hand-built option row takes", () => {
    const own = sources()
      .filter(([, src]) => src.includes('role="option"'))
      // A PopoverItem row takes the recipe itself (the Combobox's options).
      .filter(([, src]) => !src.includes("ROVING_HIGHLIGHT") && !src.includes("<PopoverItem"))
      .map(([name]) => name);
    expect(own).toEqual([]);
  });
});