import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Repeated clipboard screenshots keep one image without preparing flicker", WEB, async ({ t3, app, screen, browser }) => {
  const project = await t3.project("Image paste demo");
  await t3.thread({ project, title: "Clipboard image draft", messages: ["Ready for an image."] });
  await t3.open();
  await screen.getByRole("button", "Clipboard image draft, Done, Image paste demo").tap();
  await screen.getByRole("textbox").tap();
  await browser.evaluate(async () => {
    const canvas = document.createElement("canvas");
    canvas.width = 3840; canvas.height = 2160;
    const ctx = canvas.getContext("2d")!;
    ctx.fillStyle = "#123047"; ctx.fillRect(0, 0, 3840, 2160);
    for (let y = 0; y < 2160; y += 16) for (let x = 0; x < 3840; x += 16) {
      ctx.fillStyle = `rgb(${(x * 13 + y * 7) % 256},${(x * 3 + y * 11) % 256},${(x + y * 5) % 256})`;
      ctx.fillRect(x, y, 14, 14);
    }
    ctx.fillStyle = "#ffffff"; ctx.fillRect(300, 700, 3240, 500);
    ctx.fillStyle = "#123047"; ctx.font = "bold 160px sans-serif";
    ctx.fillText("Clipboard screenshot", 480, 1000);
    const blob = await new Promise<Blob>((resolve) => canvas.toBlob((b) => resolve(b!), "image/png"));
    await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
  });
  await browser.keyboard.press("Control+V");
  await browser.evaluate(() => new Promise<void>((resolve) => setTimeout(resolve, 2500)));
  await app.screenshot("first-image-attached");
  await browser.evaluate(() => {
    (window as any).repeatPreparing = false;
    const observe = () => {
      if (Array.from(document.querySelectorAll("span")).some((n) => n.textContent === "Preparing")) (window as any).repeatPreparing = true;
    };
    new MutationObserver(observe).observe(document.body, { subtree: true, childList: true, characterData: true });
  });
  for (let i = 1; i <= 3; i++) {
    await browser.keyboard.press("Control+V");
    await app.screenshot(`repeat-paste-${i}`);
    await browser.evaluate(() => new Promise<void>((resolve) => setTimeout(resolve, 1500)));
  }
  await app.screenshot("repeats-settled");
  expect(await browser.evaluate(() => (window as any).repeatPreparing)).toBe(false);
  expect(await browser.evaluate(() => document.querySelectorAll('[data-chat-composer-expanded-image="true"]').length)).toBe(1);
});