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

type TestPage = {
  pageName: string;
  url: string;
};

const genTimestamp = (): string =>
  Intl.DateTimeFormat("sv-SE", {
    dateStyle: "short",
  }).format(Date.now());

const takeFullPageScreenshot = async (page: Page, name: string): Promise<void> => {
  await page.screenshot({ fullPage: false, path: `captures/${name}`, type: "png" });
};

// TODO: Faire des tests spécifiques pour chaque page, que l'on puisse attendre que toutes les images dans la vue soient chargées, et prendre des captures à différentes positions dans la page.

Array.from<TestPage>([
  {
    pageName: "home",
    url: "https://haikuatelier.gcch.local/",
  },
  {
    pageName: "shop",
    url: "https://haikuatelier.gcch.local/shop/",
  },
  {
    pageName: "about",
    url: "https://haikuatelier.gcch.local/about/",
  },
  {
    pageName: "category",
    url: "https://haikuatelier.gcch.local/product-category/rings/",
  },
  {
    pageName: "product",
    url: "https://haikuatelier.gcch.local/product/fuyou-long-earrings-silver/",
  },
]).forEach(({ pageName, url }) => {
  test(pageName, async ({ page }, testInfo) => {
    await page.goto(url);

    const projectName = testInfo.project.name;
    const timestamp: string = genTimestamp();
    const viewport = page.viewportSize();

    const captureName = `${pageName}/${projectName}-${viewport?.width}-${viewport?.height} ${timestamp}.png`;

    await takeFullPageScreenshot(page, captureName);
    await expect(page).toHaveURL(url);
  });
});