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

test('下拉禁用', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('base-select#disabled')
  const wrap = page.locator('#disabled')
  const input = wrap.locator('.tiny-input__inner').first()

  const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
  await expect(hasDisabled).toBe(true)
})

test('多选某项禁用', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('base-select#disabled')
  const wrap = page.locator('#disabled')
  const select = wrap.locator('.tiny-base-select').nth(1)
  const dropdown = page.locator('body > .tiny-select-dropdown')
  const tag = select.locator('.tiny-tag')
  const option = dropdown.locator('.tiny-option')

  await expect(tag).toHaveCount(1)
  await select.click()
  await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)

  await option.filter({ hasText: '上海' }).click()
  await expect(tag).toHaveCount(1)

  await option.filter({ hasText: '北京' }).click()
  await expect(tag).toHaveCount(2)
  await expect(tag.filter({ hasText: '北京' })).toHaveCount(1)
})

test('单选某项禁用', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('base-select#disabled')
  const wrap = page.locator('#disabled')
  const select = wrap.locator('.tiny-base-select').nth(2)
  const input = select.locator('.tiny-input__inner')
  const dropdown = page.locator('body > .tiny-select-dropdown')
  const option = dropdown.locator('.tiny-option')

  await select.click()
  await expect(option.filter({ hasText: '全部' })).toHaveCount(0)
  await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)

  await option.filter({ hasText: '上海' }).click()
  await expect(dropdown).toBeVisible()
  await expect(input).toHaveValue('')

  await option.filter({ hasText: '北京' }).click()
  await expect(dropdown).toBeHidden()
  await expect(input).toHaveValue('北京')
})

test('多选，禁用项默认选中', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('base-select#disabled')
  const wrap = page.locator('#disabled')
  const select = wrap.locator('.tiny-base-select').nth(3)
  const dropdown = page.locator('body > .tiny-select-dropdown')
  const tag = select.locator('.tiny-tag')
  const option = dropdown.locator('.tiny-option')

  // 默认值显示 tag 数
  await expect(tag).toHaveCount(2)
  // 非禁用项显示关闭图标
  await expect(tag.filter({ hasText: '天津' }).locator('svg')).toHaveCount(1)

  // 下拉禁用和默认选中的效果
  await select.click()
  await expect(option.filter({ hasText: '全部' })).toHaveCount(1)
  await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
  await expect(option.filter({ hasText: '上海' })).toHaveClass(/selected/)
  await expect(option.filter({ hasText: '天津' })).toHaveClass(/selected/)

  // 点击禁用项不取消选中
  await option.filter({ hasText: '上海' }).click()
  await expect(dropdown).toBeVisible()
  await expect(tag).toHaveCount(2)

  // 选中其他项
  await option.filter({ hasText: '北京' }).click()
  await expect(dropdown).toBeVisible()
  await expect(tag).toHaveCount(3)
})
