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

describe('UsFooter', () => {
  let el: UsFooter

  const getElShadowRoot = (): HTMLElement => {
    return el.shadowRoot?.querySelector('.us-footer') as HTMLElement
  }

  beforeEach(async () => {
    el = await fixture(html`<us-footer></us-footer>`)
  })

  it('should has default props and classes', () => {
    expect(el.widgetView).toBe('vertical')
    expect(el.showPrimaryButton).toBeFalsy()
    expect(el.showSecondaryButton).toBeFalsy()
    expect(el.primaryButtonIcon).toBeFalsy()
    expect(el.primaryButtonLabel).toBeFalsy()
    expect(el.secondaryButtonLabel).toBeFalsy()
    expect(el.secondaryButtonIcon).toBeFalsy()
    expect(el.showContentSlot).toBeFalsy()
    expect(el.variant).toBe('default')
    expect(getElShadowRoot().className).toContain('us-footer')
    expect(getElShadowRoot().className).toContain(el.widgetView)
  })

  it('should show the primary button if the property is provided', async () => {
    el.showPrimaryButton = true

    await elementUpdated(el)
    const button = getElShadowRoot()?.querySelector('us-button[variant=primary]')

    expect(button).toBeTruthy()
  })

  it('should show the secondary button if the property is provided', async () => {
    el.showSecondaryButton = true

    await elementUpdated(el)
    const button = getElShadowRoot()?.querySelector('us-button[variant=secondary]')

    expect(button).toBeTruthy()
  })

  it('should contain the slot if the property is provided', async () => {
    el.showContentSlot = true

    await elementUpdated(el)
    const slot = getElShadowRoot()?.querySelector('.us-footer__content')?.querySelector('slot')

    expect(slot).toBeTruthy()
  })

  it('should contain the beforeContent slot', async () => {
    const slot = getElShadowRoot()?.querySelector('slot[name=beforeContent]')

    expect(slot).toBeTruthy()
  })

  it('should emit the primary button click event', async () => {
    el.showPrimaryButton = true
    const spy = vi.spyOn(el, 'primaryButtonClick')

    await elementUpdated(el)
    const button = getElShadowRoot()?.querySelector('us-button[variant=primary]') as HTMLElement
    button?.click()

    expect(spy).toBeCalled()
  })

  it('should emit the secondary button click event', async () => {
    el.showSecondaryButton = true
    const spy = vi.spyOn(el, 'secondaryButtonClick')

    await elementUpdated(el)
    const button = getElShadowRoot()?.querySelector('us-button[variant=secondary]') as HTMLElement
    button?.click()

    expect(spy).toBeCalled()
  })
})