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

describe('UsAccordion', () => {
  let usAccordion: UsAccordion

  const accordionWrapper = () => {
    const wrapper = usAccordion.shadowRoot?.querySelector('.accordion-wrapper')
    return wrapper
  }

  let mockHandleChange: Function

  beforeEach(async () => {
    usAccordion = await fixture(html`<us-accordion></us-accordion>`)
    mockHandleChange = vi.fn()
  })

  it('should be defined', async () => {
    expect(usAccordion).toBeDefined()
    expect(usAccordion.tagName).toBe('US-ACCORDION')
  })

  it('should be correct initial properties', () => {
    expect(usAccordion.widgetView).toBe('vertical')
    expect(usAccordion.variant).toBe('primary')
    expect(usAccordion.iconName).toBe('')
    expect(usAccordion.titleClose).toBe('')
    expect(usAccordion.infoTooltip).toBeFalsy()
  })

  it('should be certain class "primary" depending on the data passed', async () => {
    usAccordion.widgetView = 'vertical'
    usAccordion.iconName = 'card'
    usAccordion.title = 'Show more'

    await elementUpdated(usAccordion)

    expect((accordionWrapper()?.querySelector('.accordion-header') as HTMLElement).className).toContain(usAccordion.variant)
  })

  it('should be certain class "link" depending on the data passed', async () => {
    usAccordion.widgetView = 'vertical'
    usAccordion.iconName = 'card'
    usAccordion.title = 'Show more'
    usAccordion.variant = 'link'

    await elementUpdated(usAccordion)

    expect((accordionWrapper() as HTMLElement).className).toContain(usAccordion.variant)
  })

  it('should be certain class "button" depending on the data passed', async () => {
    usAccordion.widgetView = 'vertical'
    usAccordion.iconName = 'card'
    usAccordion.title = 'Show more'
    usAccordion.variant = 'button'

    await elementUpdated(usAccordion)

    expect((accordionWrapper() as HTMLElement).className).toContain(usAccordion.variant)
  })

  it('should be certain slot with depending on the slot-data passed', async () => {
    usAccordion = await fixture(html`
        <us-accordion widgetView="vertical" variant="primary" iconName="card" title="Show more">
            <div slot="accordionContent" class="target-slot">
                <ul class="list-content">
                    <li>123</li>
                    <li>123</li>
                </ul>
            </div>
        </us-accordion>
        `)

    await elementUpdated(usAccordion)

    expect((document.querySelector('.target-slot')?.children[0] as HTMLElement).className).toContain('list-content')
  })

  it('should be change property "showContent" after click', async () => {
    usAccordion = await fixture(html`
        <us-accordion widgetView="vertical" variant="primary" iconName="card" title="Show more">
            <div slot="accordionContent" class="target-slot">
                <ul class="list-content">
                    <li>123</li>
                    <li>123</li>
                </ul>
            </div>
        </us-accordion>
        `)

    await elementUpdated(usAccordion)

    const accordionHeader = accordionWrapper()?.querySelector('.accordion-header') as HTMLElement

    accordionHeader.addEventListener('click', () => mockHandleChange())
    accordionHeader.click()

    await elementUpdated(usAccordion)

    expect(mockHandleChange).toHaveBeenCalled()
    expect(usAccordion.showContent).toBeTruthy()
  })
})