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

describe('TextArea', () => {
  it('labels the control and reports raw values', () => {
    const onValueChange = vi.fn()
    render(<TextArea label="Description" value="" onValueChange={onValueChange} />)

    fireEvent.change(screen.getByLabelText('Description'), { target: { value: 'what happened' } })
    expect(onValueChange).toHaveBeenCalledWith('what happened')
  })

  it('honours a hidden label and a disabled state', () => {
    render(<TextArea label="Message to agent" labelMode="hidden" value="" onValueChange={vi.fn()} disabled />)
    const control = screen.getByRole('textbox', { name: 'Message to agent' })
    expect(control).toBeDisabled()
  })

  it('links its error text and marks the field invalid', () => {
    render(<TextArea label="Description" value="" onValueChange={vi.fn()} error="Description is required." />)
    const control = screen.getByLabelText('Description')
    expect(control).toHaveAttribute('aria-invalid', 'true')
    const describedId = control.getAttribute('aria-describedby')
    expect(describedId).not.toBeNull()
    expect(document.getElementById(describedId!)?.textContent).toBe('Description is required.')
  })
})