import { beforeEach, describe, expect, it, vi } from 'vitest'
import { elementUpdated, fixture, html } from '@open-wc/testing-helpers'
import './UsList'
import type { LitElement } from 'lit'
import type { IListProps } from './model/IListProps'

type ITestUsList = LitElement & IListProps

describe('UsList', () => {
  let list: ITestUsList
  let listData: IListProps['list']
  let mockHandleItemClick: Function
  const getListShadowRoot = (): HTMLElement => {
    return list.shadowRoot?.querySelector('.list') as HTMLElement
  }
  const getListItem = (): any => {
    return getListShadowRoot().querySelectorAll('.list-item') as NodeList
  }

  beforeEach(async () => {
    mockHandleItemClick = vi.fn(e => e)
    listData = [
      {
        label: 'List Item 1',
        checked: false,
      },
      {
        label: 'List Item 2',
        checked: false,
      },
      {
        label: 'List Item 3',
        checked: false,
      },
      {
        label: 'List Item 4',
        checked: false,
      },
      {
        label: 'List Item 5',
        checked: false,
      },
    ]
    list = await fixture(html`
      <us-list .list="${listData}"></us-list>
    `)
  })

  it('should be created component us-list', () => {
    const testList = document.querySelector('us-list')

    expect(testList).not.toBeNull()
  })

  it('should has default props and classes', () => {
    expect(list.showList).toBeFalsy()
    expect(list.multiple).toBeFalsy()
    expect(list.ariaLabel).toBe('simplebar-aria-label')
    expect(list.top).toBeFalsy()
    expect(list.maxHeight).toBe('235')
    expect(list.list).toBe(listData)
    expect(list.dataTestId).toBe('list')
    expect(getListShadowRoot().className).toContain('list')
    expect(getListShadowRoot().className).toContain('list_display_none')
  })

  it('has class top when top=true', async () => {
    list.top = true

    await elementUpdated(list)

    expect(list.top).toBeTruthy()
    expect(getListShadowRoot().className).toContain('top')
  })

  it('does not have class list_display_none when showList=true', async () => {
    list.showList = true

    await elementUpdated(list)

    expect(list.showList).toBeTruthy()
    expect(getListShadowRoot().className).not.toContain('list_display_none')
  })

  it('should has 5 items in list', () => {
    const list = getListItem()

    expect(list.length).toBe(5)
  })

  it('should dispatch event on click', async () => {
    const listItem = getListItem()[1]

    listItem.addEventListener('click', () => mockHandleItemClick())
    listItem.click()

    expect(mockHandleItemClick).toHaveBeenCalled()
  })

  it('should dispatch event on keydown', async () => {
    getListShadowRoot().addEventListener('click', () => mockHandleItemClick())
    getListShadowRoot().click()

    expect(mockHandleItemClick).toHaveBeenCalled()
  })
})