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

describe('UsButton', () => {
  let el: UsButton
  const getElShadowRoot = (): HTMLElement => {
    return el.shadowRoot?.querySelector('button') as HTMLElement
  }

  beforeEach(async () => {
    el = await fixture(html`
      <us-button .disabled="${false}" .size="${'md'}" .isIcon=${false} .isFullWidth="${false}" .uppercase="${false}">Text</us-button>
      `)
  })

  it('should has default structure, props and classes', () => {
    expect(el.tagName).toBe('US-BUTTON')
    expect(getElShadowRoot().getAttribute('role')).toEqual('button')
    expect(getElShadowRoot().className).toContain('usbutton')
    expect(el.disabled).toBeFalsy()
    expect(el.dataTestId).toBe('button')
    expect(el.iconName).toBe('')
    expect(el.isFullWidth).toBeFalsy()
    expect(el.isActive).toBeFalsy()
    expect(el.innerText).toContain('Text')
    expect(el.getAttribute('aria-disabled')).toBeNull()
    expect(el.getAttribute('aria-pressed')).toBeNull()
    expect(el.getAttribute('autocomplete')).toBeNull()
    expect(el.getAttribute('tabindex')).toBeNull()
  })

  it('should has variant class primary by default', async () => {
    expect(getElShadowRoot().className).toContain('usbutton_variant_primary')
  })

  it('should has attribute disabled when disabled set', async () => {
    el.setAttribute('disabled', 'true')
    await elementUpdated(el)
    expect(el.getAttribute('disabled')).toBeTruthy()
  })

  it('applies w-full class when isFullWidth is true', async () => {
    el.isFullWidth = true
    await elementUpdated(el)
    expect(getElShadowRoot().className).toContain('w-full')
  })

  it('should change the icon if provided "like" variant', async () => {
    const spy = vi.spyOn(el, 'setEvaluationState')

    el.variant = 'like'
    await elementUpdated(el)

    expect(spy).toBeCalled()
  })

  it('should change the icon if provided "dislike" variant', async () => {
    const spy = vi.spyOn(el, 'setEvaluationState')

    el.variant = 'dislike'
    await elementUpdated(el)

    expect(spy).toBeCalled()
  })

  it('should has attribute disabled when disabled set', async () => {
    el.disabled = true
    await elementUpdated(el)
    expect(el.disabled).toBeTruthy()
  })

  it('should not emit click event when clicked and disabled', async () => {
    const mockHandleClick = vi.fn()
    el.setAttribute('disabled', 'true')
    el.addEventListener('click', () => mockHandleClick())
    await elementUpdated(el)
    expect(mockHandleClick).toHaveBeenCalledTimes(0)
  })

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

  it('should display default slot', () => {
    expect(el.innerText).toContain('Text')
  })
})