import type { Page } from '@playwright/test'

import { expect, test } from '@playwright/test'
import path from 'path'
import { fileURLToPath } from 'url'

import type { Page as PayloadPage } from './payload-types.js'

import { initPageConsoleErrorCatch } from '../helpers.js'
import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
import { initPayloadE2E } from '../helpers/initPayloadE2E.js'
import config from './config.js'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

const { beforeAll, describe } = test
let url: AdminUrlUtil
let page: Page
let draftParentId: string
let parentId: string
let draftChildId: string
let childId: string

describe('Nested Docs Plugin', () => {
  beforeAll(async ({ browser }) => {
    const { serverURL, payload } = await initPayloadE2E({ config, dirname })
    url = new AdminUrlUtil(serverURL, 'pages')
    const context = await browser.newContext()
    page = await context.newPage()

    initPageConsoleErrorCatch(page)

    async function createPage({
      slug,
      title = 'Title page',
      parent,
      _status = 'published',
    }: Partial<PayloadPage>): Promise<PayloadPage> {
      return payload.create({
        collection: 'pages',
        data: {
          title,
          slug,
          _status,
          parent,
        },
      }) as unknown as Promise<PayloadPage>
    }

    const parentPage = await createPage({ slug: 'parent-slug' })
    parentId = parentPage.id

    const childPage = await createPage({
      slug: 'child-slug',
      title: 'Child page',
      parent: parentId,
    })
    childId = childPage.id

    const draftParentPage = await createPage({ slug: 'parent-slug-draft', _status: 'draft' })
    draftParentId = draftParentPage.id

    const draftChildPage = await createPage({
      slug: 'child-slug-draft',
      title: 'Child page',
      parent: draftParentId,
      _status: 'draft',
    })
    draftChildId = draftChildPage.id
  })

  describe('Core functionality', () => {
    const slugClass = '#field-slug'
    const publishButtonClass = '#action-save'
    const draftButtonClass = '#action-save-draft'

    test('Parent slug updates breadcrumbs in child', async () => {
      await page.goto(url.edit(childId))
      let slug = page.locator(slugClass).nth(0)
      await expect(slug).toHaveValue('child-slug')

      // TODO: remove when error states are fixed
      const apiTabButton = page.locator('text=API')
      await apiTabButton.click()
      const breadcrumbs = page.locator('text=/parent-slug').first()
      await expect(breadcrumbs).toBeVisible()

      // TODO: add back once error states are fixed
      // const parentSlugInChildClass = '#field-breadcrumbs__0__url'
      // const parentSlugInChild = page.locator(parentSlugInChildClass).nth(0)
      // await expect(parentSlugInChild).toHaveValue('/parent-slug')

      await page.goto(url.edit(parentId))
      slug = page.locator(slugClass).nth(0)
      await slug.fill('updated-parent-slug')
      await expect(slug).toHaveValue('updated-parent-slug')
      await page.locator(publishButtonClass).nth(0).click()
      await page.goto(url.edit(childId))

      // TODO: remove when error states are fixed
      await apiTabButton.click()
      const updatedBreadcrumbs = page.locator('text=/updated-parent-slug').first()
      await expect(updatedBreadcrumbs).toBeVisible()

      // TODO: add back once error states are fixed
      // await expect(parentSlugInChild).toHaveValue('/updated-parent-slug')
    })

    test('Draft parent slug does not update child', async () => {
      await page.goto(url.edit(draftChildId))

      // TODO: remove when error states are fixed
      const apiTabButton = page.locator('text=API')
      await apiTabButton.click()
      const breadcrumbs = page.locator('text=/parent-slug-draft').first()
      await expect(breadcrumbs).toBeVisible()

      // TODO: add back once error states are fixed
      // const parentSlugInChildClass = '#field-breadcrumbs__0__url'
      // const parentSlugInChild = page.locator(parentSlugInChildClass).nth(0)
      // await expect(parentSlugInChild).toHaveValue('/parent-slug-draft')

      await page.goto(url.edit(parentId))
      await page.locator(slugClass).nth(0).fill('parent-updated-draft')
      await page.locator(draftButtonClass).nth(0).click()
      await page.goto(url.edit(draftChildId))

      await apiTabButton.click()
      const updatedBreadcrumbs = page.locator('text=/parent-slug-draft').first()
      await expect(updatedBreadcrumbs).toBeVisible()

      // TODO: add back when error states are fixed
      // await expect(parentSlugInChild).toHaveValue('/parent-slug-draft')
    })
  })
})