import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { useState } from 'react'
import { MemberFields } from './MemberFields'

function Wrapper({ initial = [] as string[] }) {
  const [members, setMembers] = useState(initial)
  return (
    <>
      <MemberFields members={members} onChange={setMembers} />
      <output data-testid="committed">{members.join(',')}</output>
    </>
  )
}

describe('MemberFields', () => {
  it('renders one empty row by default', () => {
    render(<Wrapper />)
    expect(screen.getByLabelText('Member 1')).toBeInTheDocument()
  })

  it('commits trimmed, non-empty names to the parent', async () => {
    const user = userEvent.setup()
    render(<Wrapper />)
    await user.type(screen.getByLabelText('Member 1'), '  A. Rossi  ')
    expect(screen.getByTestId('committed')).toHaveTextContent('A. Rossi')
  })

  it('adds a field below when "+" is clicked', async () => {
    const user = userEvent.setup()
    render(<Wrapper />)
    await user.click(screen.getByRole('button', { name: /add member/i }))
    expect(screen.getByLabelText('Member 2')).toBeInTheDocument()
  })

  it('seeds a row per existing member and can remove one', async () => {
    const user = userEvent.setup()
    render(<Wrapper initial={['A. Rossi', 'K. Tanaka']} />)
    expect(screen.getByLabelText('Member 1')).toHaveValue('A. Rossi')
    await user.click(screen.getByRole('button', { name: /remove member 1/i }))
    expect(screen.getByTestId('committed')).toHaveTextContent('K. Tanaka')
    expect(screen.getByTestId('committed')).not.toHaveTextContent('A. Rossi')
  })

  it('caps at 5 members', () => {
    render(<Wrapper initial={['A', 'B', 'C', 'D', 'E']} />)
    expect(screen.getByRole('button', { name: /add member/i })).toBeDisabled()
  })
})