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

type ITestUsButton = LitElement & IInsightButtonProps

describe('UsInsightButton', () => {
  let el: ITestUsButton
  const getUnreadShadowRoot = (): HTMLElement => {
    return el.shadowRoot?.querySelector('.insight-button__item_unread') as HTMLElement
  }
  const getPulseShadowRoot = (): HTMLElement => {
    return el.shadowRoot?.querySelector('.insight-button__item_shake') as HTMLElement
  }

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

  it('should has default structure', () => {
    expect(el.tagName).toBe('US-INSIGHT-BUTTON')
    expect(el.isItem).toBeFalsy()
    expect(el.isRead).toBeFalsy()
    expect(el.dataTestId).toBe('button_insight')
  })

  it('applies class insight-button__item_unread', async () => {
    el.isRead = true
    el.isItem = true

    await elementUpdated(el)

    expect(getUnreadShadowRoot().className).toContain('insight-button__item_unread')
  })

  it('applies class insight-button__item_shake', async () => {
    el.isRead = false
    el.isItem = true

    await elementUpdated(el)

    expect(getPulseShadowRoot().className).toContain('insight-button__item_shake')
  })

  it('should dispatch event on clicks', async () => {
    const handleClick = vi.fn()
    el.addEventListener('click', () => handleClick())
    el.click()
    expect(handleClick).toHaveBeenCalled()
  })
})