import type { APIRequestContext, Page } from '@playwright/test'
import { expect, test } from './fixtures'

async function csrf(request: APIRequestContext) {
  const state = await request.storageState()
  return state.cookies.find(cookie => cookie.name === 'dodo_csrf')?.value ?? ''
}

async function createTask(request: APIRequestContext, baseURL: string, listId: string, title: string) {
  const response = await request.post('/api/v1/tasks', {
    data: { title, list_id: listId },
    headers: { 'x-csrf-token': await csrf(request), origin: baseURL },
  })
  expect(response.ok(), await response.text()).toBeTruthy()
}

async function openInbox(page: Page) {
  const inbox = page.locator('.sidebar').getByRole('button', { name: '收集箱', exact: true })
  if (await page.evaluate(() => window.innerWidth <= 930)) {
    await page.locator('main .topbar > button').first().click()
  }
  await inbox.click()
}

test('task pagination stays below the list and returns to the list start after navigation', async ({ page, request, baseURL }) => {
  const bootstrapResponse = await request.get('/api/v1/bootstrap')
  expect(bootstrapResponse.ok()).toBeTruthy()
  const inbox = (await bootstrapResponse.json()).lists.find((item: { is_inbox: boolean }) => item.is_inbox)
  expect(inbox).toBeTruthy()

  for (let index = 1; index <= 51; index += 1) {
    await createTask(request, baseURL!, inbox.id, `分页验收任务 ${String(index).padStart(2, '0')}`)
  }

  await page.goto('/')
  await openInbox(page)

  const taskList = page.locator('.task-list')
  const pager = page.locator('.pager')
  await expect(taskList.locator('.task-row')).toHaveCount(50)
  await expect(pager).toBeVisible()
  await expect(pager).toContainText('1 / 2')

  const firstPageGeometry = await page.evaluate(() => {
    const list = document.querySelector<HTMLElement>('.task-list')!.getBoundingClientRect()
    const pagerBox = document.querySelector<HTMLElement>('.pager')!.getBoundingClientRect()
    return { listBottom: list.bottom, pagerTop: pagerBox.top }
  })
  expect(firstPageGeometry.pagerTop).toBeGreaterThanOrEqual(firstPageGeometry.listBottom)

  await pager.getByRole('button', { name: '下一页' }).click()
  await expect(pager).toContainText('2 / 2')
  await expect(taskList.locator('.task-row')).toHaveCount(1)

  const secondPageGeometry = await page.evaluate(() => {
    const list = document.querySelector<HTMLElement>('.task-list')!.getBoundingClientRect()
    const pagerBox = document.querySelector<HTMLElement>('.pager')!.getBoundingClientRect()
    return { listTop: list.top, listBottom: list.bottom, pagerTop: pagerBox.top, viewportHeight: innerHeight }
  })
  expect(secondPageGeometry.listTop).toBeGreaterThanOrEqual(-1)
  expect(secondPageGeometry.listTop).toBeLessThan(secondPageGeometry.viewportHeight / 2)
  expect(secondPageGeometry.pagerTop).toBeGreaterThanOrEqual(secondPageGeometry.listBottom)
})