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

type ITestUsGroupBox = LitElement & IGroupBoxProps

describe('UsGroupBox', () => {
  let groupBox: ITestUsGroupBox
  let mockHandleReset: Function
  const getGroupBoxShadowRoot = (): HTMLElement => {
    return groupBox.shadowRoot?.querySelector('.group-box') as HTMLElement
  }
  const getGroupBoxHeaderShadowRoot = (): HTMLElement => {
    return groupBox.shadowRoot?.querySelector('.group-box__header') as HTMLElement
  }

  beforeEach(async () => {
    mockHandleReset = vi.fn(e => e)
    groupBox = await fixture(html`
      <us-group-box></us-group-box>
    `)
  })

  it('should be created component us-group-box', () => {
    expect(groupBox).toBeDefined()
    expect(groupBox.tagName).toBe('US-GROUP-BOX')
  })

  it('should has default props', () => {
    expect(groupBox.hasBackground).toBeFalsy()
    expect(groupBox.collapse).toBeFalsy()
    expect(groupBox.collapseOpened).toBeFalsy()
    expect(groupBox.showClearButton).toBeFalsy()
    expect(groupBox.dataTestId).toBe('box_group')
  })

  it('should has group-box_backgound class when hasBackground=true', async () => {
    groupBox.hasBackground = true

    await groupBox.updateComplete

    expect(getGroupBoxShadowRoot().className).toContain('group-box_background')
  })

  it('should has group-box__header_opened class when collapseOpened=true', async () => {
    groupBox.collapseOpened = true

    await groupBox.updateComplete

    expect(getGroupBoxHeaderShadowRoot().className).toContain('group-box__header_opened')
  })

  it('header should have slot', async () => {
    const slot = getGroupBoxHeaderShadowRoot().children[0]

    expect(slot instanceof HTMLSlotElement).toBeTruthy()
  })

  it('header should have collapse icon when collapse=true', async () => {
    groupBox.collapse = true

    await groupBox.updateComplete

    const collapseIcon = getGroupBoxHeaderShadowRoot().querySelector('.group-box__arrow') as HTMLElement

    expect(collapseIcon).not.toBeNull()
  })

  it('should has slot when collapseOpened=true', async () => {
    groupBox.collapseOpened = true

    await groupBox.updateComplete

    const bodySlot = getGroupBoxShadowRoot().querySelector('.group-box__body') as HTMLElement

    expect(bodySlot).not.toBeNull()
  })

  it('header should have reset button when showClearButton=true and should dispatch event on clicks', async () => {
    groupBox.showClearButton = true

    await groupBox.updateComplete

    const clearButton = getGroupBoxHeaderShadowRoot().querySelector('.group-box__clear') as HTMLButtonElement

    expect(clearButton).not.toBeNull()

    clearButton.addEventListener('click', () => mockHandleReset())
    clearButton.click()

    expect(mockHandleReset).toHaveBeenCalled()
  })
})