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

describe('UsInput', () => {
  let input: UsInput
  let mockHandleInputClick: Function
  const getInputShadowRoot = (): HTMLElement => {
    return input.shadowRoot?.querySelector('.usinput__input') as HTMLElement
  }
  const getInputLabelShadowRoot = (): HTMLElement => {
    return input.shadowRoot?.querySelector('.usinput__label') as HTMLElement
  }
  const getInputCounterShadowRoot = (): HTMLElement => {
    return input.shadowRoot?.querySelector('.counter') as HTMLElement
  }

  beforeEach(async () => {
    mockHandleInputClick = vi.fn(e => e)
    input = await fixture(html`
      <us-input></us-input>
    `)
  })

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

    expect(testUsInput).toBeDefined()
  })

  it('should has default props', () => {
    expect(input.error).toBeFalsy()
    expect(input.readonly).toBeFalsy()
    expect(input.disabled).toBeFalsy()
    expect(input.required).toBeFalsy()
    expect(input.textArea).toBeFalsy()
    expect(input.search).toBeFalsy()
    expect(input.showCounter).toBeFalsy()
    expect(input.inbuilt).toBeFalsy()
    expect(input.maxLength).toBeUndefined()
    expect(input.placeholder).toBe('')
    expect(input.type).toBe('text')
    expect(input.value).toBe('')
    expect(input.pattern).toBe('')
    expect(input.label).toBe('')
    expect(input.validation).toBe('')
    expect(input.tooltipTitleText).toBe('')
    expect(input.tooltipLinkName).toBe('')
    expect(input.tooltipLinkHref).toBe('')
    expect(input.dataTestId).toBe('text_field')
  })

  it('should has input__error class when error=true', async () => {
    input.error = true

    await elementUpdated(input)

    expect(getInputShadowRoot().className).toContain('input__error')
  })

  it('should has placeholder when placeholder changed', async () => {
    const testPlaceholder = 'test placeholder'

    input.placeholder = testPlaceholder

    await elementUpdated(input)

    expect(getInputShadowRoot().getAttribute('placeholder')).toBe(testPlaceholder)
  })

  it('should be updated input type', async () => {
    const inputType = 'email'

    input.type = inputType

    await elementUpdated(input)

    expect(getInputShadowRoot().getAttribute('type')).toBe(inputType)
  })

  it('should has input_readonly class and readonly attribute when readonly=true', async () => {
    input.readonly = true

    await elementUpdated(input)

    expect(getInputShadowRoot().className).toContain('input_readonly')
    expect(getInputShadowRoot().hasAttribute('readonly')).toBeTruthy()
  })

  it('should has required attribute when required=true', async () => {
    input.required = true

    await elementUpdated(input)

    expect(getInputShadowRoot().hasAttribute('required')).toBeTruthy()
  })

  it('should be updated label', async () => {
    const inputLabel = 'test label'

    input.label = inputLabel

    await elementUpdated(input)

    expect(getInputLabelShadowRoot().innerText).toContain(inputLabel)
  })

  it('should has counter when counter=true', async () => {
    input.showCounter = true

    await elementUpdated(input)

    expect(getInputCounterShadowRoot()).toBeDefined()
  })

  it('should has maxlength attribute when maxlength=true', async () => {
    const inputMaxLength = 180

    input.maxLength = inputMaxLength

    await elementUpdated(input)

    expect(getInputShadowRoot().hasAttribute('maxlength')).toBeTruthy()
    expect(getInputShadowRoot().getAttribute('maxlength')).toBe(inputMaxLength.toString())
  })

  it('should be property input value equal', () => {
    const inputValue = 'test input'

    input.value = inputValue

    expect(input.value).toBe(inputValue)
  })

  it('should dispatch event on input', async () => {
    const input = getInputShadowRoot()

    input.addEventListener('click', () => mockHandleInputClick())
    input.click()

    expect(mockHandleInputClick).toHaveBeenCalled()
  })

  it('should render tooltip when `showTooltip` has been provided', async () => {
    input.showTooltip = true
    await elementUpdated(input)

    const tooltip = input.shadowRoot?.querySelector('us-tooltip')

    expect(tooltip?.tagName).toBe('US-TOOLTIP')
  })

  it('should show icon when `icon` prop has been provided', async () => {
    input.icon = 'calendar'

    await elementUpdated(input)

    const icon = input.shadowRoot?.querySelector('.usinput__icon')?.getAttribute('name')

    expect(icon).toBe('calendar')
  })

  it('should render two inputs in range mode', async () => {
    input.range = true
    await elementUpdated(input)

    const inputs = input.shadowRoot?.querySelectorAll('.usinput__input')

    expect(inputs?.length).toBe(2)
  })

  it('should emit `input` details in range mode', async () => {
    const listener = oneEvent(input, 'input')
    input.range = true
    input.minValue = '12'
    input.maxValue = '15'
    await elementUpdated(input)

    input.dispatchRangeInputEvent()
    const { detail } = await listener

    expect(detail.data).toEqual({ min: '12', max: '15' })
  })
})