import '@testing-library/jest-dom'

import { fireEvent, render, screen } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'

import { PktTextinput } from './Textinput'

expect.extend(toHaveNoViolations)

const inputId = 'inputId'
const label = 'Input Label'

describe('PktTextinput', () => {
  test('renders input field with correct props', async () => {
    const { getByLabelText } = render(<PktTextinput label={label} id={inputId} />)

    const inputElement = getByLabelText('Input Label')
    expect(inputElement).toBeInTheDocument()
    expect(inputElement.tagName).toBe('INPUT')
    expect(inputElement.id).toBe('inputId')
  })

  test('renders error message when hasError prop is true', async () => {
    render(<PktTextinput label={label} id={inputId} hasError errorMessage="Input error" />)

    const errorMessageId = screen.getByRole('textbox').getAttribute('aria-errormessage')
    const alertContainer = screen.getByRole('alert')
    expect(alertContainer).toHaveAttribute('id', errorMessageId)
    expect(alertContainer).toHaveTextContent('Input error')
  })

  describe('inputSize', () => {
    test('applies medium size classes by default', async () => {
      const { container } = render(<PktTextinput label={label} id={inputId} />)

      const inputElement = container.querySelector('input')
      const containerElement = container.querySelector('.pkt-input__container')
      expect(inputElement).toHaveClass('pkt-input--medium')
      expect(containerElement).toHaveClass('pkt-input__container--medium')
    })

    test('applies small size classes when inputSize is small', async () => {
      const { container } = render(<PktTextinput label={label} id={inputId} inputSize="small" />)

      const inputElement = container.querySelector('input')
      const containerElement = container.querySelector('.pkt-input__container')
      expect(inputElement).toHaveClass('pkt-input--small')
      expect(containerElement).toHaveClass('pkt-input__container--small')
    })

    test('applies xsmall size classes when inputSize is xsmall', async () => {
      const { container } = render(<PktTextinput label={label} id={inputId} inputSize="xsmall" />)

      const inputElement = container.querySelector('input')
      const containerElement = container.querySelector('.pkt-input__container')
      expect(inputElement).toHaveClass('pkt-input--xsmall')
      expect(containerElement).toHaveClass('pkt-input__container--xsmall')
    })
  })

  describe('PktTextinput', () => {
    test('toggles helptext class', async () => {
      const { getByText, container } = render(
        <PktTextinput label={label} id={inputId} helptext="Help Text" helptextDropdown="Help Text" />,
      )

      const expandButton = getByText('Les mer').closest('button') as HTMLButtonElement
      const helptextElement = container.querySelector('.pkt-inputwrapper__helptext-expandable-closed')

      await fireEvent.click(expandButton)
      expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-open')

      await fireEvent.click(expandButton)
      expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')
    })
  })

  describe('accessibility', () => {
    it('renders with no wcag errors with axe', async () => {
      const { container } = render(<PktTextinput label={label} id={inputId} />)

      const results = await axe(container)
      expect(results).toHaveNoViolations()
    })
  })
})