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

test("Project settings reach both checkouts on one environment", WEB, async ({ t3, app, screen, browser }) => {
  await browser.setViewport({ width: 1280, height: 1200 });
  const remote = '[remote "origin"]\n  url = https://github.com/example/checkout-demo.git\n  fetch = +refs/heads/*:refs/remotes/origin/*\n';
  const first = await t3.project("checkout-a", { ".git/config": remote });
  const second = await t3.project("checkout-b", { ".git/config": remote });
  await t3.open();
  await screen.getByRole("button", "Add project", { exact: true }).waitFor();
  await app.open("/settings/projects");
  await screen.getByRole("button", "Project scope: All projects").tap();
  await screen.getByRole("menuitemradio", "example/checkout-demo", { exact: true }).tap();
  await screen.getByRole("button", "Environment scope: All environments").tap();
  await screen.getByRole("menuitemradio", "Scenario", { exact: false }).tap();
  const scopeUrl = await browser.evaluate(() => window.location.pathname + window.location.search);
  const environmentId = await browser.evaluate(async () => (await (await fetch("/.well-known/t3/environment")).json()).environmentId);
  for (const [path, names] of [[first, ["Build A", "Test A", "Lint A"]], [second, ["Build B", "Test B"]]] as const) {
    await app.open(`${scopeUrl}&checkout=${encodeURIComponent(`${environmentId}:${path}`)}`);
    for (const name of names) {
      await screen.getByRole("button", "Add action", { exact: true }).tap();
      await screen.getByLabel("Name", { exact: true }).fill(name);
      await screen.getByLabel("Command", { exact: true }).fill(`echo ${name}`);
      await screen.getByRole("button", "Save action", { exact: true }).tap();
      await screen.getByRole("button", `Edit ${name}`).waitFor({ state: "attached" });
    }
  }
  await app.open(scopeUrl);
  await screen.getByRole("button", "Add action", { exact: true }).scrollIntoView();
  await app.screenshot("mixed-actions");
  const scope = screen.getByRole("button", "Checkout scope: All checkouts");
  await expect(scope).toBeVisible();
  await scope.tap();
  await screen.getByRole("menuitemradio", "checkout-b", { exact: false }).tap();
  await expect(screen.getByRole("button", "Edit Build B")).toBeAttached();
  await expect(screen.getByRole("button", "Edit Test B")).toBeAttached();
  await expect(screen.getByRole("button", "Edit Build A")).toHaveCount(0);
  await screen.getByRole("button", "Add action", { exact: true }).scrollIntoView();
  await app.screenshot("second-checkout-actions");
  await screen.getByRole("button", "Edit Build B").tap();
  await screen.getByLabel("Name", { exact: true }).fill("Build B edited");
  await screen.getByRole("button", "Save changes", { exact: true }).tap();
  await screen.getByRole("dialog", "Edit Action", { exact: true }).waitFor({ state: "detached" });
  await expect(screen.getByRole("button", "Edit Build B edited")).toBeAttached();
  await screen.getByRole("button", "Add action", { exact: true }).scrollIntoView();
  await app.screenshot("second-checkout-edited");
  await screen.getByRole("button", "Checkout scope: checkout-b").tap();
  await screen.getByRole("menuitemradio", "checkout-a", { exact: false }).tap();
  await expect(screen.getByRole("button", "Edit Build A")).toBeAttached();
  await expect(screen.getByRole("button", "Edit Test A")).toBeAttached();
  await expect(screen.getByRole("button", "Edit Lint A")).toBeAttached();
  await expect(screen.getByRole("button", "Edit Build B edited")).toHaveCount(0);
  await screen.getByRole("button", "Add action", { exact: true }).scrollIntoView();
  await app.screenshot("first-checkout-unchanged");
  await screen.getByRole("button", "Checkout scope: checkout-a").tap();
  await screen.getByRole("menuitemradio", "All checkouts", { exact: true }).tap();
  await expect(screen.getByText("Different actions across checkouts", { exact: true })).toBeVisible();
  await screen.getByRole("button", "Add action", { exact: true }).scrollIntoView();
  await app.screenshot("all-checkouts-restored");
});