import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import { ThemeSearchField } from './ThemeSearchField'

describe('ThemeSearchField', () => {
  afterEach(() => {
    cleanup()
    vi.useRealTimers()
  })

  it('toont wat de gebruiker typt zonder daarop te wachten', () => {
    vi.useFakeTimers()
    const onChange = vi.fn()
    render(<ThemeSearchField waarde="" onChange={onChange} />)
    const veld = screen.getByRole('searchbox')

    fireEvent.change(veld, { target: { value: 'beb' } })
    expect((veld as HTMLInputElement).value).toBe('beb')
    // De boven­liggende werkruimte weet er nog niets van; die hertekende
    // voorheen bij elke letter.
    expect(onChange).not.toHaveBeenCalled()
  })

  it('geeft de waarde één keer door wanneer het typen stopt', () => {
    vi.useFakeTimers()
    const onChange = vi.fn()
    render(<ThemeSearchField waarde="" onChange={onChange} />)
    const veld = screen.getByRole('searchbox')

    for (const tekst of ['b', 'be', 'beb', 'bebo', 'bebou', 'bebouw']) {
      fireEvent.change(veld, { target: { value: tekst } })
      vi.advanceTimersByTime(40)
    }
    expect(onChange).not.toHaveBeenCalled()

    vi.advanceTimersByTime(200)
    expect(onChange).toHaveBeenCalledTimes(1)
    expect(onChange).toHaveBeenCalledWith('bebouw')
  })

  it('volgt een waarde die van buitenaf gewist wordt', () => {
    const onChange = vi.fn()
    const { rerender } = render(<ThemeSearchField waarde="bebouw" onChange={onChange} />)
    expect((screen.getByRole('searchbox') as HTMLInputElement).value).toBe('bebouw')

    rerender(<ThemeSearchField waarde="" onChange={onChange} />)
    expect((screen.getByRole('searchbox') as HTMLInputElement).value).toBe('')
  })

  it('houdt een toegankelijke naam', () => {
    render(<ThemeSearchField waarde="" onChange={vi.fn()} />)
    expect(screen.getByRole('searchbox', { name: /zoek een thema/i })).toBeTruthy()
  })
})