import "../setup.ts";
import {
  assert,
  assertEquals,
  assertFalse,
  assertStringIncludes,
} from "@std/assert";
import { EmailKit, esc } from "../../mail/layout.ts";
import { EMAIL_STYLES } from "../../mail/styles.ts";
import { STYLE_NAMES } from "../../../shared/theme.ts";

const doc = (kit: EmailKit) =>
  kit.document({
    subject: "S <1>",
    preheader: "P & Q",
    title: "T",
    body: kit.para("body"),
    footer: kit.footer("why", [["Settings", "https://x.test/?a=1&b=2"]]),
  });

Deno.test("esc: user text never becomes markup", () => {
  assertEquals(
    esc(`<b a="1">'&'</b>`),
    "&lt;b a=&quot;1&quot;&gt;&#39;&amp;&#39;&lt;/b&gt;",
  );
});

Deno.test("EmailKit: auto inlines light and recolors in a dark media block", () => {
  const html = doc(new EmailKit({ style: "smooth", scheme: "auto" }, "en"));
  const { light, dark } = EMAIL_STYLES.smooth;
  assertStringIncludes(html, `background-color:${light.card}`);
  assertStringIncludes(html, "@media (prefers-color-scheme:dark)");
  assertStringIncludes(
    html,
    `.b-card{background-color:${dark.card}!important}`,
  );
  assertStringIncludes(html, `content="light dark"`);
  // The subject, preheader and link are escaped where they land.
  assertStringIncludes(html, "<title>S &lt;1&gt;</title>");
  assertStringIncludes(html, "P &amp; Q");
  assertStringIncludes(html, `href="https://x.test/?a=1&amp;b=2"`);
});

Deno.test("EmailKit: a chosen scheme is the only one sent", () => {
  const { light, dark } = EMAIL_STYLES.kanagawa;
  const darkHtml = doc(
    new EmailKit({ style: "kanagawa", scheme: "dark" }, "en"),
  );
  assertStringIncludes(darkHtml, `background-color:${dark.card}`);
  assertFalse(darkHtml.includes(light.card));
  assertFalse(darkHtml.includes("prefers-color-scheme"));
  assertStringIncludes(darkHtml, `content="dark"`);
  const lightHtml = doc(
    new EmailKit({ style: "kanagawa", scheme: "light" }, "fr"),
  );
  assertStringIncludes(lightHtml, `background-color:${light.card}`);
  assertStringIncludes(lightHtml, `<html lang="fr">`);
  assertFalse(lightHtml.includes("prefers-color-scheme"));
});

Deno.test("EmailKit: every style draws its own card and font", () => {
  for (const name of STYLE_NAMES) {
    const style = EMAIL_STYLES[name];
    const html = doc(new EmailKit({ style: name, scheme: "light" }, "en"));
    assertStringIncludes(html, `background-color:${style.light.card}`);
    assertStringIncludes(html, `font-family:${style.font}`);
    assertEquals(html.includes("fonts.googleapis.com"), !!style.webFont, name);
  }
  // The rainbow and the hard shadow are what GeoCities and Brutalist look like.
  const geo = new EmailKit({ style: "geocities", scheme: "light" }, "en");
  assertStringIncludes(
    geo.section("A", "", false),
    "linear-gradient(90deg,#ff004d",
  );
  const brutal = doc(
    new EmailKit({ style: "brutalist", scheme: "light" }, "en"),
  );
  assert(brutal.includes("box-shadow:5px 5px 0"));
});