import { test, expect } from "bun:test";
import { readFileSync } from "node:fs";
import { Window } from "happy-dom";

test("preview input never requests a replacement; settings still do", async () => {
  const window = new Window({ url: "http://localhost/components/input" });
  window.document.body.innerHTML = `<div data-playground data-playground-component="Input">
    <div data-playground-preview><input aria-label="Example" /></div>
    <form data-playground-form><input name="label" value="Name" /></form>
    <pre data-playground-code></pre><span data-playground-status></span>
  </div>`;
  let requests = 0;
  window.fetch = async () => {
    requests++;
    return new window.Response("", { status: 500 });
  };
  window.eval(readFileSync(new URL("../public/playground.js", import.meta.url), "utf8"));
  const preview = window.document.querySelector("[data-playground-preview] input")!;
  preview.dispatchEvent(new window.Event("input", { bubbles: true }));
  preview.dispatchEvent(new window.Event("change", { bubbles: true }));
  await new Promise((resolve) => setTimeout(resolve, 250));
  expect(requests).toBe(0);
  window.document
    .querySelector("[data-playground-form] input")!
    .dispatchEvent(new window.Event("input", { bubbles: true }));
  await new Promise((resolve) => setTimeout(resolve, 250));
  expect(requests).toBe(1);
  await window.happyDOM.close();
});

test("stored theme updates its stylesheet before the theme runtime loads", async () => {
  const window = new Window({ url: "http://localhost/components/alert" });
  window.document.cookie = "wrn-ui-mode=light;path=/";
  window.document.head.innerHTML =
    '<link rel="stylesheet" data-wrnexus-theme href="/__wrnexus/theme/dark/violet.css">';
  window.eval(readFileSync(new URL("../public/playground.js", import.meta.url), "utf8"));
  expect(window.document.documentElement.dataset.theme).toBe("light");
  expect(window.document.querySelector("link")?.getAttribute("href")).toBe(
    "/__wrnexus/theme/light/violet.css",
  );
  await window.happyDOM.close();
});