/// <reference lib="dom" />
import { expect } from "e2e";
import { runPromise, test, WEB } from "./t3.ts";
import { run } from "./shell.ts";

test("Stacked composer notices join without a dark seam and retain the bottom seam", WEB, async ({ t3, app, screen, browser }) => {
  const project = await t3.project("banner-demo");
  const thread = await t3.thread({ project, title: "Composer banners", messages: ["Hello"] });
  await t3.open("/settings/appearance");
  await screen.getByRole("button", "Use dark mode", { exact: true }).tap();
  await screen.getByRole("button", "Add theme", { exact: true }).tap();
  await screen.getByRole("button", "Nord", { exact: true }).tap();
  await screen.getByRole("button", "Install Nord", { exact: true }).tap();
  await screen.getByRole("button", "Use Nord dark mode", { exact: true }).tap();
  await t3.open(thread);
  const composer = screen.getByRole("textbox");
  await composer.fill("Remember the main branch");
  await composer.press("Enter");
  await screen.getByText("Remember the main branch", { exact: true }).waitFor();
  await screen.getByRole("button", "Stop generation").waitFor({ state: "hidden" });
  await composer.fill("Preparing next message");
  await screen.getByRole("combobox", "Branch: main", { exact: true }).waitFor();
  await runPromise(run("git", ["checkout", "-b", "feature"], { cwd: project }));
  await composer.fill("Branch changed externally");
  await screen.getByText("Branch changed from", { exact: false }).waitFor();
  await composer.fill("/clear");
  await composer.press("Enter");
  await screen.getByText("Your next message starts a fresh session", { exact: true }).waitFor();
  await screen.getByText("Branch changed from", { exact: false }).waitFor();
  await composer.fill("Ready for the next message");
  await browser.keyboard.press("Escape");
  await app.screenshot("nord-stacked-banners");
  const stacked = await browser.evaluate(() => Array.from(document.querySelectorAll('[data-composer-banner-surface="attached"]')).map(el => getComputedStyle(el, "::before").backgroundImage));
  await screen.getByRole("button", "Keep the current session", { exact: true }).tap();
  await app.screenshot("nord-single-banner");
  const single = await browser.evaluate(() => Array.from(document.querySelectorAll('[data-composer-banner-surface="attached"]')).map(el => getComputedStyle(el, "::before").backgroundImage));
  expect(stacked.length).toBe(2);
  expect(stacked[0].includes("0.18")).toBe(false);
  expect(stacked[1].includes("0.18")).toBe(true);
  expect(single.length).toBe(1);
  expect(single[0].includes("0.18")).toBe(true);
});