import { expect, test, type Page } from "@playwright/test";

const content = (page: Page, id: string) => page.locator(`#${id}`).locator(".cm-content");
const lineWith = (page: Page, id: string, text: string) => content(page, id).locator(".cm-line", { hasText: text });

test.beforeEach(async ({ page }) => {
  await page.goto("/code.html");
  await expect(content(page, "ada")).toContainText("export function greet");
  await expect(content(page, "grace")).toContainText("export function greet");
});

test("the language loads from the filename and highlights tokens", async ({ page }) => {
  const keyword = lineWith(page, "ada", "export function greet").locator("span", { hasText: /^export$/ });
  await expect(keyword).toHaveCount(1);
  const [tokenColor, textColor] = await keyword.evaluate((el) => [
    getComputedStyle(el).color,
    getComputedStyle(el.closest(".cm-content")!).color,
  ]);
  expect(tokenColor).not.toBe(textColor);
});

test("line numbers are shown", async ({ page }) => {
  await expect(page.locator("#ada .cm-lineNumbers .cm-gutterElement", { hasText: /^11$/ })).toHaveCount(1);
});

test("typing in one editor appears in the other, with brackets closed", async ({ page }) => {
  await lineWith(page, "ada", "console.log").click();
  await page.keyboard.press("End");
  await page.keyboard.press("Enter");
  await page.keyboard.type("doc.export(");
  await expect(lineWith(page, "grace", "doc.export")).toHaveText("doc.export()");
});

test("an agent rename against the version read keeps typing made since", async ({ page }) => {
  await page.click("#agent-read");
  await lineWith(page, "grace", "console.log").click();
  await page.keyboard.press("End");
  await page.keyboard.type(" // typed after the read");
  await page.click("#agent-write");

  for (const id of ["ada", "grace"]) {
    await expect(content(page, id)).toContainText("export function welcome");
    await expect(content(page, id)).toContainText("Doc.create(welcome(");
    await expect(content(page, id)).toContainText("console.log(doc.text); // typed after the read");
  }
});

test("code scrolled sideways goes under an opaque gutter", async ({ page }) => {
  const gutter = page.locator("#ada .cm-gutters");
  const background = await gutter.evaluate((el) => getComputedStyle(el).backgroundColor);
  expect(background).not.toBe("rgba(0, 0, 0, 0)");
});