import type { Locator, Page } from '@playwright/test'
import { test, expect } from '@playwright/test'
import { joinURL, withTrailingSlash } from 'ufo'

async function waitForImages (page: Page) {
  await page.evaluate(() => {
    for (const img of document.images) img.loading = 'eager'
  })
  await page.evaluate(() => Promise.all(
    Array.from(document.images)
      .filter(img => !img.complete)
      .map(img => new Promise(resolve => {
        img.addEventListener('load', () => resolve(null), { once: true })
        img.addEventListener('error', () => resolve(null), { once: true })
      })),
  ))
}

const baseURL = process.env.BASE_URL || 'https://roe.dev/'

const url = (path: string) => joinURL(baseURL, path)

const pages = [
  '/',
  '/talks',
  '/uses',
  '/projects',
  '/blog',
  '/blog/introduction',
  '/blog/serverless-functions-nuxt-zeit-now',
  '/blog/good-ux-and-giving-birth',
  '/blog/building-your-own-vue-rich-text-component',
  '/blog/creating-your-own-sitemap-module',
  '/blog/open-invitation',
  '/blog/contributing-to-nuxt',
]

test.describe(`pages`, () => {
  for (const path of pages) {
    test(`renders ${path}`, async ({ page }) => {
      await page.goto(url(path))

      const title = page.locator('title')
      expect(await title.textContent()).toContain('Daniel Roe')

      await waitForImages(page)

      const mask: Locator[] = [
        page.locator('img[src*="s2/favicons"]'),
      ]
      if (path === '/') {
        mask.push(page.locator('section:has(h2:text("some recent streams")) ul'))
        mask.push(page.locator('section:has(h2:text("upcoming talks")) ul'))
        mask.push(page.locator('section:has(h2:text("recent talks")) ul'))
      }

      await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.05, mask })
    })

    test(`image for ${path}`, async ({ page }) => {
      await page.goto(url(path))

      const ogImage = page.locator('[property="og:image"]').first()
      const ogURL = await ogImage.getAttribute('content')
      await page.goto(ogURL!.replace('https://roe.dev/', withTrailingSlash(baseURL)))
      await waitForImages(page)
      await expect(page).toHaveScreenshot()
    })
  }
})