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

test.use({
  viewport: { width: 1920, height: 1080 }
})
test('测试日期范围选择', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('date-picker#date-range')

  // 日期范围
  // TINY-TODO: 日期范围和日期时间范围无法成功在输入框中输入日期
  const startDate = page.getByPlaceholder('开始日期').first()
  const endDate = page.getByPlaceholder('结束日期').first()
  await startDate.click()
  await page.waitForTimeout(100)
  await startDate.fill('2023-05-20')
  await startDate.press('Tab')
  await endDate.fill('2023-06-20')
  await startDate.click()
  await page.waitForTimeout(100)
  await page.getByRole('cell', { name: '4', exact: true }).first().click()
  await page.waitForTimeout(100)
  await page.getByRole('cell', { name: '10' }).nth(1).click()
  await page.waitForTimeout(100)
  await expect(startDate).toHaveValue('2023-05-04')
  await expect(endDate).toHaveValue('2023-06-10')

  // 日期时间范围
  const startDateTime = page.getByPlaceholder('开始日期').nth(1)
  const endDateTime = page.getByPlaceholder('结束日期').nth(1)
  await startDateTime.click()
  await page.waitForTimeout(100)
  await startDateTime.fill('2023-05-20 08:00:00')
  await startDateTime.press('Tab')
  await endDateTime.fill('2023-06-20 18:00:00')
  await startDateTime.click()
  await page.waitForTimeout(100)
  await startDateTime.press('Enter')
  await startDateTime.click()
  await page.waitForTimeout(100)
  await page.getByRole('cell', { name: '4', exact: true }).first().click()
  await page.waitForTimeout(100)
  await page.getByRole('cell', { name: '10' }).nth(1).click()
  await page.waitForTimeout(100)
  await page.getByRole('textbox', { name: '开始时间' }).click()
  await page.locator('li:nth-child(2)').first().click()
  await page.waitForTimeout(100)

  await page.getByRole('button', { name: '确定' }).first().click()
  await page.waitForTimeout(100)
  await page.getByRole('textbox', { name: '结束时间' }).click()
  await page
    .locator(
      'span:nth-child(3) > span:nth-child(2) > .tiny-time > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(3)'
    )
    .first()
    .click()
  await page.getByRole('button', { name: '确定' }).first().click()
  await startDateTime.click()
  await page.waitForTimeout(100)
  await startDateTime.press('Enter')
  await expect(startDateTime).toHaveValue('2023-05-20 08:00:00')
  await expect(endDateTime).toHaveValue('2023-06-20 18:00:00')

  // 月份范围
  const startMonth = page.getByPlaceholder('开始月份')
  const endMonth = page.getByPlaceholder('结束月份')
  await startMonth.first().click()
  await page.waitForTimeout(100)
  await startMonth.fill('2023-05')
  await startMonth.press('Tab')
  await endMonth.fill('2023-06')
  await endMonth.press('Enter')
  await startMonth.click()
  await page.waitForTimeout(100)
  await page.getByText('1 月').first().click()
  await page.waitForTimeout(100)
  await page.getByText('12 月').first().click()
  await page.waitForTimeout(100)
  await expect(startMonth).toHaveValue('2023-01')
  await expect(endMonth).toHaveValue('2023-12')

  // 年份范围
  const startYear = page.getByPlaceholder('开始年份')
  const endYear = page.getByPlaceholder('结束年份')
  await startYear.click()
  await page.waitForTimeout(100)
  await startYear.fill('2022')
  await startYear.press('Tab')
  await endYear.fill('2023')
  await endYear.press('Enter')
  await endYear.click()
  await page.waitForTimeout(100)
  await page.getByRole('cell', { name: '2020' }).getByText('2020').click()
  await page.waitForTimeout(100)
  await page.getByRole('cell', { name: '2023' }).getByText('2023').click()
  await page.waitForTimeout(100)
  await expect(startYear).toHaveValue('2020')
  await expect(endYear).toHaveValue('2023')
})
