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

describe('UsRadioButton', () => {
  let radio: UsRadioButton
  let childrenWrapper: HTMLCollection
  let input: HTMLInputElement
  let label: HTMLLabelElement
  let settings: IRadioButtonSettingsProps[]

  const getElShadowRoot = (): HTMLElement => {
    return radio.shadowRoot?.querySelector('.radio-button-wrapper') as HTMLElement
  }

  const getTooltip = (): HTMLElement => {
    return getElShadowRoot().querySelector('us-tooltip') as HTMLElement
  }

  let mockHandleClick: Function

  beforeEach(async () => {
    settings = [{
      name: 'radio',
      id: 'radio1',
      label: 'Radio one',
      value: 'one',
      checked: true,
      disabled: false,
    }]
    radio = await fixture(html`<us-radio-button .orientation="vertical" .radioButtonSettings="${settings}"></us-radio-button>`)
    childrenWrapper = getElShadowRoot().children
    input = childrenWrapper[0].children[0] as HTMLInputElement
    label = childrenWrapper[0].children[1] as HTMLLabelElement

    mockHandleClick = vi.fn()
  })

  it('should display default structure for 1 radio button', () => {
    expect(radio).toBeDefined()
    expect(radio.tagName).toBe('US-RADIO-BUTTON')
    expect(childrenWrapper.length).toBe(1)
    expect(input.tagName).toBe('INPUT')
    expect(label.tagName).toBe('LABEL')
  })

  it('should have the correct initial state', async () => {
    expect(radio.radioButtonSettings).toEqual(settings)
    expect(radio.orientation).toBe('vertical')
    expect(radio.hovered).toBeFalsy()
    expect(radio.tooltips).toEqual({})
  })

  it('should has orientation property and class', () => {
    const wrapper = getElShadowRoot()

    expect(radio.orientation).toBe('vertical')
    expect(wrapper.classList.contains('radio-button-vertical')).toBeTruthy()
  })

  it('should has disabled and checked attributes and text for label', () => {
    expect(input.disabled).toBeFalsy()
    expect(input.checked).toBeTruthy()
    expect(label.textContent).toBe('Radio one')
  })

  it('should has attribute disabled true and checked false when we set these attributes', async () => {
    input.disabled = true
    input.checked = false

    await elementUpdated(radio)

    expect(input.hasAttribute('disabled')).toBeTruthy()
    expect(input.hasAttribute('checked')).toBeFalsy()
  })

  it('should dispatch event on clicks', async () => {
    input.addEventListener('click', () => mockHandleClick())
    input.click()

    expect(mockHandleClick).toHaveBeenCalled()
  })

  it('should not dispatch click event when clicked and disabled', async () => {
    input.addEventListener('click', () => mockHandleClick())

    await elementUpdated(radio)

    expect(mockHandleClick).toHaveBeenCalledTimes(0)
  })

  it('should has tooltip near with radio button', async () => {
    const settings = [{
      name: 'radio',
      id: 'radio1',
      label: 'Radio one',
      value: 'one',
      checked: true,
      disabled: false,
      tooltipText: 'test',
    }]
    radio = await fixture(html`<us-radio-button .radioButtonSettings="${settings}"></us-radio-button>`)

    const usTooltip = getTooltip()
    const tooltipText = usTooltip.textContent && usTooltip.textContent.trim()

    expect(usTooltip).toBeDefined()
    expect(usTooltip.tagName).toBe('US-TOOLTIP')
    expect(tooltipText).toBe('test')
  })

  it('should have a getTooltips method', () => {
    expect(radio.getTooltips).toBeDefined()
  })
})