import "../setup.ts";
import { assertEquals } from "@std/assert";
import { EMAIL_STYLES, type EmailPalette } from "../../mail/styles.ts";
import { STYLE_NAMES } from "../../../shared/theme.ts";

// The email palettes are copies of the themes' tokens, flattened for mail
// clients. The roles that map one to one must stay equal to the theme's.
const TOKENS: [keyof EmailPalette, string][] = [
  ["outer", "--color-bg"],
  ["card", "--color-surface"],
  ["text", "--color-text"],
  ["sec", "--color-text-secondary"],
  ["muted", "--color-text-muted"],
  ["accent", "--color-accent"],
  ["link", "--color-link"],
  ["onAccent", "--color-on-accent"],
];

Deno.test("email palettes keep their theme's colors", () => {
  for (const name of STYLE_NAMES) {
    const css = Deno.readTextFileSync(
      new URL(`../../../src/themes/${name}.css`, import.meta.url),
    );
    for (const [role, token] of TOKENS) {
      const match = css.match(
        new RegExp(
          `${token}:\\s*light-dark\\(\\s*(#[0-9a-f]+),\\s*(#[0-9a-f]+)\\s*\\)`,
          "i",
        ),
      );
      if (!match) throw new Error(`${name} has no ${token}`);
      const { light, dark } = EMAIL_STYLES[name];
      assertEquals(
        [light[role], dark[role]],
        [match[1].toLowerCase(), match[2].toLowerCase()],
        `${name} ${role} (${token})`,
      );
    }
  }
});