import { beforeEach, describe, expect, it } from 'vitest'
import { elementUpdated, fixture, html } from '@open-wc/testing-helpers'
import './UsMenu'
import type { UsMenu } from './UsMenu'

describe('UsMenu', () => {
  let menu: UsMenu
  let menuList: HTMLDivElement
  let menuItems: string[]

  beforeEach(async () => {
    menuItems = ['Item 1', 'Item 2']
    menu = await fixture(
      html`
        <us-menu .menuItems=${menuItems}>
          <button slot="activator">Click me</button>
        </us-menu>
      `,
    )
    menuList = menu.shadowRoot?.querySelector('#menuList') as HTMLDivElement
  })

  it('should be defined', () => {
    expect(menu).toBeDefined()
    expect(menu.tagName).toBe('US-MENU')
  })

  it('should have correct props', async () => {
    const isOpen = false
    const corner = 'bottom'
    const width = '100%'

    expect(menu.open).toBe(isOpen)
    expect(menu.corner).toBe(corner)
    expect(menu.menuItems).toBe(menuItems)
    expect(menu.width).toBe(width)
    expect(menu.dataTestId).toBe('menu')
  })

  it('should update all properties', async () => {
    const isOpen = true
    const corner = 'top'
    const menuItems = [1, 2, 3]
    const width = '50%'

    menu.open = isOpen
    menu.corner = corner
    menu.menuItems = menuItems
    menu.width = width
    await menu.updateComplete

    expect(menu.open).toBe(isOpen)
    expect(menu.corner).toBe(corner)
    expect(menu.menuItems).toBe(menuItems)
    expect(menu.width).toBe(width)
  })

  it('should render the menu list when the open property is true', async () => {
    menu.open = true
    await menu.updateComplete

    expect(menuList).toBeDefined()
    expect(menuList.children.length).toBeGreaterThan(0)
  })

  it('should not render the menu list when the open property is false', async () => {
    menu.open = false
    await menu.updateComplete

    expect(menuList).toBeDefined()
    expect(menuList.children.length).toBe(0)
  })

  it('should display default structure when not contain items', async () => {
    menu.menuItems = []
    menu.open = true
    await elementUpdated(menu)

    expect(menuList.children.length).toBe(1)
    const child = menuList.children[0]
    expect(child instanceof HTMLSlotElement).toBeTruthy()
  })
})