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

type ITestUsCheckbox = LitElement & ICheckboxProps & {
  handleChange?: Function
  checkboxSettings: ICheckboxProps['checkboxSettingsProps']
}

const checkboxSettings: ICheckboxSettingsProps = {
  name: 'checkboxName',
  id: 'checkboxId',
  label: 'checkboxLabel',
  value: 'checkboxValue',
}

describe('UsCheckbox', () => {
  let el: ITestUsCheckbox
  const getElShadowRoot = (): HTMLElement => {
    return el.shadowRoot?.querySelector('input[type=checkbox]') as HTMLElement
  }

  const getLabelEl = (): HTMLLabelElement => {
    return el.shadowRoot?.querySelector('label') as HTMLLabelElement
  }

  const getSpanEl = (): HTMLSpanElement => {
    return getElShadowRoot().previousElementSibling as HTMLSpanElement
  }

  let mockHandleChange: Function

  beforeEach(async () => {
    el = await fixture(html`<us-checkbox .checkboxSettings="${checkboxSettings}">Text</us-checkbox>`)

    mockHandleChange = vi.fn()
  })

  it('default has structure <span></span><slot></slot><input/><label></label>', async () => {
    const prevSibling = getSpanEl()
    const inputElement = getElShadowRoot()
    const slotElement = inputElement.nextElementSibling
    const labelElement = slotElement?.nextElementSibling

    expect(el).toBeDefined()
    expect(prevSibling.tagName).toEqual('SPAN')
    expect(inputElement.tagName).toBe('INPUT')
    expect(inputElement.className).toContain('checkbox')
    expect(slotElement?.tagName).toEqual('SLOT')
    expect(labelElement?.tagName).toEqual('LABEL')
  })

  it('should has label with provided text', () => {
    const $label = getLabelEl()

    expect($label.innerText).toContain('checkboxLabel')
  })

  it('should be created component us-checkbox', () => {
    const testSwitch = document.querySelector('us-checkbox')

    expect(testSwitch).not.toBeNull()
  })

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

  it('should has default props and classes', () => {
    expect(el.variant).toBe('default')
    expect(el.indeterminate).toBeFalsy()
    expect(el.checkboxSettings).toBeTypeOf('object')
    expect(getElShadowRoot().className).toContain('checkbox')
    expect(getElShadowRoot().id).toBe(`${checkboxSettings.id}` || 'usCheckbox')
    expect(getElShadowRoot().getAttribute('type')).toBe('checkbox')
    expect(el.checked).toBeFalsy()
    expect(el.dataTestId).toBe('checkbox')
  })

  it('should has attribute checked when checked set to true', async () => {
    el.checked = true

    await elementUpdated(el)

    expect(getElShadowRoot().hasAttribute('checked')).toBeTruthy()
  })

  it('should have a handleChange function', () => {
    const handleChange = el.handleChange

    expect(handleChange).toBeDefined()
  })

  it('should dispatch event on change', async () => {
    el.addEventListener('click', () => mockHandleChange())
    el.click()

    expect(mockHandleChange).toHaveBeenCalled()
  })

  it('has aria-label attribute on label when aria-label provided', async () => {
    const $label = getLabelEl()

    expect($label.getAttribute('aria-label')).toContain('checkboxLabel')
  })

  it('has aria-labelledby attribute on label when aria-label provided', async () => {
    const $label = getLabelEl()

    expect($label.getAttribute('aria-labelledby')).toContain('checkboxId')
  })
})