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

import { expect, test } from "vitest";

const sourceDirectory = "src/shell/database-management";
const styles = readFileSync(`${sourceDirectory}/FleetLedgerShell.css`, "utf8");

test("uses operational body text for every available-command list", () => {
  const availableCommandLists = readdirSync(sourceDirectory)
    .filter((fileName) => fileName.endsWith(".tsx") && !fileName.includes(".test."))
    .flatMap((fileName) => {
      const source = readFileSync(`${sourceDirectory}/${fileName}`, "utf8");
      const matches = source.match(
        /<select\b[\s\S]*?<option value="">\{t\("Choose an action…"\)\}<\/option>[\s\S]*?<\/select>/g,
      );
      return (matches ?? []).map((markup) => ({ fileName, markup }));
    });

  expect(availableCommandLists.map(({ fileName }) => fileName).sort()).toEqual([
    "DatabaseRelationships.tsx",
    "FleetActionSelector.tsx",
  ]);
  for (const { markup } of availableCommandLists) {
    expect(markup).toContain('className="thot-fleet-action-selector__select"');
  }

  expect(styles).toMatch(
    /\.thot-fleet-action-selector__select\s*\{[^}]*font-size:\s*var\(--text-control\);/s,
  );
  expect(styles).toMatch(
    /\.thot-fleet-action-selector\s*\{[^}]*flex:\s*0 0 auto;/s,
  );
  expect(styles).toMatch(
    /\.thot-fleet-action-selector__select\s*\{[^}]*width:\s*max-content;/s,
  );
});