import { readFile } from "node:fs/promises";
import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Pasted gitignore fences keep their label and receive syntax colors", WEB, async ({ t3, app, screen, browser }) => {
  await t3.project("Gitignore example");
  await t3.open();
  await screen.getByRole("textbox").tap();
  await browser.evaluate(() => {
    const editor = document.querySelector('[contenteditable="true"]');
    if (!editor) throw new Error("Composer missing");
    const clipboardData = new DataTransfer();
    clipboardData.setData("text/plain", '```gitignore\n/build\n*.log\n!keep.log\nnode_modules/\n```\n\n```ini\n/build\n*.log\n!keep.log\nnode_modules/\n```');
    editor.dispatchEvent(new ClipboardEvent("paste", { bubbles: true, cancelable: true, clipboardData }));
  });
  // Wait for the control grammar to finish loading before comparing the two fences.
  await browser.locator('.tiptap pre').nth(1).waitFor({ state: "visible" });
  await expect.poll(() => browser.evaluate(() => new Set(Array.from(document.querySelectorAll('.tiptap pre')[1]?.querySelectorAll('code span') ?? []).map(el => getComputedStyle(el).color)).size)).toBeGreaterThan(1);
  await browser.evaluate(() => {
    document.querySelectorAll('.tiptap pre')[1].scrollIntoView({ block: "nearest" });
  });
  const stableCapture = async (label: string) => {
    await browser.evaluate(() => (document.activeElement as HTMLElement)?.blur());
    let previous = await app.screenshot(`${label}-stability`);
    for (let attempt = 0; attempt < 10; attempt++) {
      await new Promise(resolve => setTimeout(resolve, 500));
      const current = await app.screenshot(`${label}-${attempt + 1}`);
      if ((await readFile(previous)).equals(await readFile(current))) return;
      previous = current;
    }
    throw new Error(`Capture ${label} was not stable`);
  };
  await stableCapture("ini-control");
  await browser.evaluate(() => {
    document.querySelector('.tiptap').scrollTop = 0;
  });
  await stableCapture("gitignore-colors");
  await expect.poll(() => browser.evaluate(() => new Set(Array.from(document.querySelectorAll('.tiptap pre')[0]?.querySelectorAll('code span') ?? []).map(el => getComputedStyle(el).color)).size)).toBeGreaterThan(1);
});