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

test("Selecting each side-chat tab focuses its composer", WEB, async ({ t3, app, screen, browser }) => {
  const project = await t3.project("Focus demo");
  const thread = await t3.thread({ project, title: "Parent thread", messages: ["Hello"] });
  await t3.open(thread);
  await screen.getByRole("button", "Toggle right panel", { exact: true }).tap();
  await screen.getByRole("button", /^Side chat/).tap();
  const add = async (name: string) => {
    await screen.getByRole("button", "Add panel surface", { exact: true }).tap();
    await screen.getByRole("menuitem", new RegExp(`^${name}`)).tap();
  };
  await add("Side chat");
  await add("Diff");
  await add("Terminal");
  const main = screen.getByRole("textbox").first();
  await main.fill("main draft");
  await screen.getByRole("button", "Diff", { exact: true }).tap();
  const tabs = screen.getByRole("button", /^Side chat(?:,|$)/);
  await tabs.nth(0).tap();
  await browser.keyboard.type("hi");
  await app.screenshot("from-diff");
  await expect.soft(screen.getByRole("textbox").last()).toHaveText("hi");
  await screen.getByRole("button", "Terminal 1", { exact: true }).tap();
  await tabs.nth(0).tap();
  await browser.keyboard.type("!");
  await app.screenshot("from-terminal");
  await expect.soft(screen.getByRole("textbox").last()).toHaveText("hi!");
  await tabs.nth(0).tap();
  await browser.keyboard.type("a");
  await app.screenshot("already-selected");
  await expect.soft(screen.getByRole("textbox").last()).toHaveText("hi!a");
  await tabs.nth(1).tap();
  await browser.keyboard.type("b");
  await app.screenshot("second-side-chat");
  await expect.soft(screen.getByRole("textbox").last()).toHaveText("b");
  await screen.getByRole("textbox").last().tap();
  await browser.keyboard.type("c");
  await app.screenshot("direct-click-control");
  await expect.soft(main).toHaveText("main draft");
});