import { pluralize } from '../../../utils'
import { ServiceTypeWithTeams } from '../../conversation_filter_recipients/types'
import { RecipientLinkRow } from './recipient_link_row'

interface TeamRecipientRowProps {
  serviceType: ServiceTypeWithTeams
  onPress: (teams: ServiceTypeWithTeams['teams']) => void
}

export const TeamRecipientRow = ({ serviceType, onPress }: TeamRecipientRowProps) => {
  const serviceTypeAccessibilityLabel = `Select ${pluralize(serviceType.teams.length, 'team')} for ${serviceType.name}`
  const teamNames =
    serviceType.id > 0 ? serviceType.teams.map(team => team.name).join(', ') : undefined

  return (
    <RecipientLinkRow
      title={serviceType.name}
      subtitle={teamNames}
      onPress={() => onPress(serviceType.teams)}
      accessibilityLabel={serviceTypeAccessibilityLabel}
      accessibilityHint={`Selects Service Type's teams as recipients and navigates to the final screen to finish creating the conversation`}
    />
  )
}