import "../setup.ts";
import {
  assert,
  assertEquals,
  assertMatch,
  assertNotEquals,
} from "@std/assert";
import { readTokens } from "../../mail/theme-tokens.ts";
import { EMAIL_STYLES } from "../../mail/styles.ts";
import { STYLE_NAMES } from "../../../shared/theme.ts";

Deno.test("readTokens: light-dark() picks the scheme's value", () => {
  assertEquals(readTokens("smooth", "light").color("--color-bg"), "#faf5e9");
  assertEquals(readTokens("smooth", "dark").color("--color-bg"), "#01152a");
});

Deno.test("readTokens: a forced scheme's block overrides the theme's", () => {
  // GeoCities draws a darker rainbow on its light pages.
  assertEquals(readTokens("geocities", "light").stops("--geo-rainbow"), [
    "#ff004d",
    "#ff8a00",
    "#ffcc00",
    "#00aa1a",
    "#0077dd",
    "#8800cc",
  ]);
  assertEquals(
    readTokens("geocities", "dark").stops("--geo-rainbow")[2],
    "#ffee00",
  );
});

Deno.test("readTokens: var() follows tokens, color-mix() is computed", () => {
  const melange = readTokens("melange", "light");
  // The spice starts with var(--color-accent) and drops its stops' positions.
  assertEquals(melange.stops("--mel-spice"), [
    "#a06d00",
    "#bc5c00",
    "#c77b8b",
    "#be79bb",
    "#6e9b72",
  ]);
  // 18% of the muted text over the card, as a badge shows on the site.
  const smooth = readTokens("smooth", "light");
  assertEquals(smooth.color("--color-badge-bg", "--color-surface"), "#dfe4e1");
  assertEquals(smooth.color("--color-badge-bg"), "rgba(77,113,120,0.18)");
});

Deno.test("readTokens: fonts, lengths and the base tokens", () => {
  assertEquals(
    readTokens("smooth", "light").font("--font-body"),
    "Saira, sans-serif",
  );
  assertEquals(
    readTokens("kanagawa", "dark").font("--font-body"),
    "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
  );
  // Smooth keeps tokens.css's radii; Brutalist squares them.
  assertEquals(readTokens("smooth", "light").px("--radius-xl"), 12);
  assertEquals(readTokens("brutalist", "light").px("--radius-xl"), 0);
});

Deno.test("EMAIL_STYLES: every style reads plain colors from its theme", () => {
  for (const name of STYLE_NAMES) {
    const style = EMAIL_STYLES[name];
    for (const palette of [style.light, style.dark]) {
      for (const [role, color] of Object.entries(palette)) {
        if (role === "gradient") continue;
        assertMatch(
          color,
          role === "shadow" ? /^rgba\(/ : /^#[0-9a-f]{6}$/,
          `${name} ${role}`,
        );
      }
    }
    assertNotEquals(style.light.card, style.dark.card, name);
    if (style.rule === "gradient" || style.bar) {
      assert((style.light.gradient?.length ?? 0) > 1, name);
    }
  }
});