import '@testing-library/jest-dom'

import { fireEvent, render, screen } from '@testing-library/react'
import { vi } from 'vitest'

import { PktHelptext } from './Helptext'

describe('PktHelptext', () => {
  test('renders the container without the has-helptext modifier when empty', () => {
    const { container } = render(<PktHelptext forId="field" />)

    const root = container.querySelector('.pkt-inputwrapper__helptext-container')
    expect(root).toBeInTheDocument()
    expect(root).not.toHaveClass('pkt-inputwrapper__has-helptext')
  })

  test('renders helptext string as HTML inside the helptext div', () => {
    const { container } = render(<PktHelptext forId="field" helptext="Hjelp <strong>her</strong>" />)

    const helptext = container.querySelector(`#field-helptext`)
    expect(helptext).toBeInTheDocument()
    expect(helptext?.querySelector('strong')).toHaveTextContent('her')
    expect(container.querySelector('.pkt-inputwrapper__helptext-container')).toHaveClass(
      'pkt-inputwrapper__has-helptext',
    )
  })

  test('renders helptext ReactNode directly', () => {
    render(
      <PktHelptext forId="field" helptext={<em data-testid="rn">Rich</em>} />,
    )

    expect(screen.getByTestId('rn')).toHaveTextContent('Rich')
  })

  test('renders children inside pkt-contents', () => {
    const { container } = render(
      <PktHelptext forId="field">
        <span data-testid="slot">Slot content</span>
      </PktHelptext>,
    )

    const contents = container.querySelector('.pkt-contents')
    expect(contents).toBeInTheDocument()
    expect(contents?.querySelector('[data-testid="slot"]')).toHaveTextContent('Slot content')
  })

  test('renders the dropdown toggle button with the default label when no button text is provided', () => {
    render(<PktHelptext forId="field" helptextDropdown="Mer info" />)

    const button = screen.getByRole('button')
    expect(button.querySelector('.pkt-btn__text')).toHaveTextContent('Les mer')
  })

  test('renders a custom helptextDropdownButton as HTML', () => {
    render(
      <PktHelptext
        forId="field"
        helptextDropdown="Mer info"
        helptextDropdownButton="Vis <em>detaljer</em>"
      />,
    )

    const button = screen.getByRole('button')
    expect(button.querySelector('em')).toHaveTextContent('detaljer')
  })

  test('toggles the dropdown open class and calls onToggleHelpText', () => {
    const onToggle = vi.fn()
    const { container } = render(
      <PktHelptext
        forId="field"
        helptextDropdown="Mer info"
        onToggleHelpText={onToggle}
      />,
    )

    const expandable = container.querySelector('.pkt-inputwrapper__helptext-expandable')
    const innerHelptext = expandable?.querySelector('.pkt-inputwrapper__helptext')
    expect(innerHelptext).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')

    fireEvent.click(screen.getByRole('button'))
    expect(innerHelptext).toHaveClass('pkt-inputwrapper__helptext-expandable-open')
    expect(onToggle).toHaveBeenLastCalledWith(true)

    fireEvent.click(screen.getByRole('button'))
    expect(innerHelptext).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')
    expect(onToggle).toHaveBeenLastCalledWith(false)
  })

  test('does not render an id on the helptext div when forId is missing', () => {
    const { container } = render(<PktHelptext helptext="No id here" />)

    const helptext = container.querySelector('.pkt-inputwrapper__helptext')
    expect(helptext).toBeInTheDocument()
    expect(helptext).not.toHaveAttribute('id')
  })
})