import { test, expect } from '@playwright/test'

const artworkPath = '/art/56897/the-park-in-fall'

test.describe('M18H.1 deferred artwork comments', () => {
  test('keeps comments deferred, then loads exactly once on approach', async ({ page }) => {
    test.setTimeout(60000)

    const commentsRequests: string[] = []
    const commentsStatuses: number[] = []
    const consoleErrors: string[] = []
    const pageErrors: string[] = []

    page.on('request', (request) => {
      if (/\/api\/artworks\/\d+\/comments(?:\?|$)/.test(request.url())) {
        commentsRequests.push(request.url())
      }
    })
    page.on('response', (response) => {
      if (/\/api\/artworks\/\d+\/comments(?:\?|$)/.test(response.url())) commentsStatuses.push(response.status())
    })
    page.on('console', (message) => {
      if (message.type() === 'error') consoleErrors.push(message.text())
    })
    page.on('pageerror', (error) => pageErrors.push(error.message))

    await page.setViewportSize({ width: 375, height: 320 })
    await page.addInitScript(() => {
      if (window.location.hostname !== 'skinbase26.test') return
      window.__m18h1Observers = []
      window.IntersectionObserver = class {
        constructor(callback, options) {
          this.callback = callback
          this.options = options
          window.__m18h1Observers.push(this)
        }
        observe() {}
        disconnect() {}
      }
    })
    const response = await page.goto(artworkPath, { waitUntil: 'domcontentloaded' })
    expect(response?.status()).toBe(200)
    await expect(page.locator('main').first()).toBeVisible()

    const controlledObserver = await page.evaluate(() => Array.isArray(window.__m18h1Observers))
    await page.waitForTimeout(1500)
    if (controlledObserver) expect(commentsRequests).toHaveLength(0)
    else expect(commentsRequests.length).toBeLessThanOrEqual(1)

    const comments = page.locator('section[aria-label="Comments"]')
    if (controlledObserver) {
      await comments.scrollIntoViewIfNeeded()
      await page.evaluate(() => window.__m18h1Observers.forEach((observer) => observer.callback([{ isIntersecting: true }])))
      await expect.poll(() => commentsRequests.length, { timeout: 10000 }).toBe(1)
      await expect.poll(() => commentsStatuses.length, { timeout: 10000 }).toBe(1)
      expect(commentsStatuses[0]).toBe(200)
    } else {
      await expect.poll(() => commentsRequests.length, { timeout: 10000 }).toBe(1)
      await expect.poll(() => commentsStatuses.length, { timeout: 10000 }).toBe(1)
      expect(commentsStatuses[0]).toBe(200)
    }

    await page.waitForTimeout(500)
    expect(commentsRequests).toHaveLength(1)
    expect(consoleErrors).toEqual([])
    expect(pageErrors).toEqual([])
  })
})