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

test("Composer context labels hide the conversation while scrolling", WEB, async ({ t3, app, screen, browser }) => {
  await browser.addInitScript(() => localStorage.setItem("t3code:theme", "light"));
  const project = await t3.project("Composer example", { "src/math.ts": "export const sum = (a, b) => a + b;\n" });
  await t3.thread({ project, title: "Composer scrolling example", model: "showcase", messages: ["Give me a short tour", "Add clamp", "Check the tests"] });
  await t3.open();
  await screen.getByText("Composer scrolling example", { exact: false }).first().waitFor({ timeout: 120000 });
  await app.open("/settings/appearance");
  await screen.getByRole("button", "Advanced", { exact: true }).first().tap();
  await screen.getByRole("switch", "Keep composer context visible in active threads").tap();
  await app.open("/");
  await browser.locator("[data-thread-item]").first().tap();
  await browser.locator("[data-slot=composer-context-strip]").waitFor({ state: "visible" });
  await screen.getByText("This turn is a replay.", { exact: false }).last().waitFor({ timeout: 120000 });
  await new Promise((resolve) => setTimeout(resolve, 1500));
  await app.screenshot("before-scroll");
  await browser.evaluate(() => {
    const viewport = document.querySelector<HTMLElement>(".messages-timeline-scroll")!;
    viewport.scrollTop = 63;
    viewport.dispatchEvent(new Event("scroll"));
  });
  await new Promise((resolve) => setTimeout(resolve, 1500));
  await app.screenshot("scrolled-context-row");
  await new Promise((resolve) => setTimeout(resolve, 500));
  await app.screenshot("scrolled-context-row-stability");
  const surface = await browser.evaluate(() => {
    const row = document.querySelector("[data-slot=composer-context-strip]")!;
    const style = getComputedStyle(row);
    return { background: style.backgroundColor, backdrop: style.backdropFilter };
  });
  expect(surface.background).not.toBe("rgba(0, 0, 0, 0)");
});