import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import { QuizInput } from '../QuizInput'

describe('QuizInput', () => {
  const mockSetAnswer = jest.fn()

  beforeEach(() => {
    mockSetAnswer.mockClear()
  })

  it('renders multiple choice buttons for round 1', () => {
    render(
      <QuizInput
        currentRound={1}
        answer=""
        setAnswer={mockSetAnswer}
      />
    )

    const buttons = screen.getAllByRole('button')
    expect(buttons).toHaveLength(4)
    expect(buttons[0]).toHaveTextContent('А')
    expect(buttons[1]).toHaveTextContent('Б')
    expect(buttons[2]).toHaveTextContent('В')
    expect(buttons[3]).toHaveTextContent('Г')
  })

  it('renders textarea for rounds other than 1', () => {
    render(
      <QuizInput
        currentRound={2}
        answer=""
        setAnswer={mockSetAnswer}
      />
    )

    const textarea = screen.getByRole('textbox')
    expect(textarea).toBeInTheDocument()
    expect(textarea).toHaveAttribute('placeholder', 'Вашият отговор')
  })

  it('calls setAnswer when a multiple choice button is clicked', () => {
    render(
      <QuizInput
        currentRound={1}
        answer=""
        setAnswer={mockSetAnswer}
      />
    )

    const button = screen.getByText('А')
    fireEvent.click(button)
    expect(mockSetAnswer).toHaveBeenCalledWith('А')
  })

  it('calls setAnswer when textarea value changes', () => {
    render(
      <QuizInput
        currentRound={2}
        answer=""
        setAnswer={mockSetAnswer}
      />
    )

    const textarea = screen.getByRole('textbox')
    fireEvent.change(textarea, { target: { value: 'test answer' } })
    expect(mockSetAnswer).toHaveBeenCalledWith('test answer')
  })

  it('disables input when disabled prop is true', () => {
    render(
      <QuizInput
        currentRound={1}
        answer=""
        setAnswer={mockSetAnswer}
        disabled={true}
      />
    )

    const buttons = screen.getAllByRole('button')
    buttons.forEach(button => {
      expect(button).toBeDisabled()
    })
  })

  it('makes textarea read-only when readOnly prop is true', () => {
    render(
      <QuizInput
        currentRound={2}
        answer=""
        setAnswer={mockSetAnswer}
        readOnly={true}
      />
    )

    const textarea = screen.getByRole('textbox')
    expect(textarea).toHaveAttribute('readOnly')
  })
})