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

for (const theme of ["light", "dark"] as const) {
  test(`Oo looks render every species with the Oo eyes (${theme})`, async ({ page }, testInfo) => {
    await page.goto(`/e2e/fixtures/oo-gallery.html?theme=${theme}`);
    const gallery = page.getByTestId("oo-gallery");
    await expect(gallery).toBeVisible({ timeout: 60_000 });
    await expect(gallery.locator("svg[data-oo-species]").first()).toBeVisible({
      timeout: 90_000,
    });
    await expect(gallery.locator("svg[data-oo-species]")).toHaveCount(12);
    for (const species of ["cat", "dog", "bunny", "bear", "robot", "ghost", "frog", "penguin"]) {
      await expect(gallery.locator(`svg[data-oo-species="${species}"]`).first()).toBeVisible();
    }
    await expect(gallery.locator('[data-part="eye-big"]')).toHaveCount(12);
    const sizes = page.getByTestId("oo-sizes");
    await expect(
      sizes.locator("svg[data-oo-species]").first().locator('[data-part="arm-left"]'),
    ).toHaveCount(0);
    await expect(
      sizes.locator("svg[data-oo-species]").last().locator('[data-part="arm-left"]'),
    ).toHaveCount(1);
    await captureScreenshot(page, testInfo, `oo-gallery-${theme}`);
  });
}

test("Oo keeps blinking and moving while visible", async ({ page }) => {
  await page.goto("/e2e/fixtures/avatar-motion.html");
  const avatar = page.locator(".rakazo-bot-avatar");
  await expect(avatar).toBeVisible();
  const rig = avatar.locator('[data-part="rig"]');
  await expect(rig).toBeVisible();
  const first = await rig.getAttribute("transform");
  await expect.poll(() => rig.getAttribute("transform")).not.toBe(first);
});