import { expect, test } from "@playwright/test";
import { captureScreenshot, completeOnboarding, signup } from "./helpers";

test("bot settings open the Atelier and dress the Oo", async ({ page }, testInfo) => {
  const stamp = Date.now();
  await signup(page, `oo-atelier-${stamp}@rakazo.test`, "password12", "Atelier");
  await completeOnboarding(page);
  await page.goto("/app");
  await page.waitForURL(/\/app\/[^/]+$/);

  await page.getByTestId("bot-settings-trigger").click();
  const settings = page.getByTestId("bot-settings");
  await expect(settings).toBeVisible();

  await settings.getByTestId("oo-atelier-trigger").click();
  const atelier = page.getByTestId("oo-atelier");
  await expect(atelier).toBeVisible();
  await expect(atelier.getByTestId("oo-atelier-body")).toBeVisible();

  await atelier.getByRole("button", { name: "Cat", exact: true }).click();
  await expect(
    atelier.locator('[data-testid="oo-atelier-preview"] svg[data-oo-species="cat"]'),
  ).toBeVisible();
  await captureScreenshot(page, testInfo, "oo-atelier-body");

  await atelier.getByRole("tab", { name: "Eyes" }).click();
  await atelier.getByRole("button", { name: "Full", exact: true }).click();
  await atelier.getByRole("button", { name: "Green", exact: true }).click();
  await captureScreenshot(page, testInfo, "oo-atelier-eyes");

  await atelier.getByRole("tab", { name: "Extras" }).click();
  await atelier.getByRole("button", { name: "Round", exact: true }).click();
  await atelier.getByRole("button", { name: "Chef's hat", exact: true }).click();
  await captureScreenshot(page, testInfo, "oo-atelier-extras");

  await atelier.getByRole("button", { name: "Done", exact: true }).click();
  await expect(atelier).toBeHidden();
  const avatar = settings.locator('[data-testid="oo-atelier-trigger"] svg[data-oo-species="cat"]');
  await expect(avatar).toBeVisible();

  await page.reload();
  await page.getByTestId("bot-settings-trigger").click();
  await expect(
    page.locator(
      '[data-testid="bot-settings"] [data-testid="oo-atelier-trigger"] svg[data-oo-species="cat"]',
    ),
  ).toBeVisible();
});

for (const theme of ["light", "dark"] as const) {
  test(`Atelier reads well in ${theme} mode`, async ({ page }, testInfo) => {
    await page.emulateMedia({ colorScheme: theme });
    await page.goto(`/e2e/fixtures/oo-atelier.html?theme=${theme}`);
    const atelier = page.getByTestId("oo-atelier");
    await expect(atelier).toBeVisible();
    await expect(atelier.locator("svg[data-oo-species]").first()).toBeVisible();
    await captureScreenshot(page, testInfo, `oo-atelier-${theme}`);
  });
}