import { useState } from 'react'
import type { ConversationSearchResultResource } from '../../../types'
import { ViewMoreLinkRow } from '../../conversation_select_recipients/components/view_more_link_row'
import { ConversationResultRow } from './conversation_result_row'
import { ResultsSection } from './results_section'

const COLLAPSED_COUNT = 5

interface ConversationResultsProps {
  results: ConversationSearchResultResource[]
  onSelect: (result: ConversationSearchResultResource, position: number) => void
}

export function ConversationResults({ results, onSelect }: ConversationResultsProps) {
  const [expanded, setExpanded] = useState(false)
  const visible = expanded ? results : results.slice(0, COLLAPSED_COUNT)

  if (results.length === 0) return null

  const footer = results.length > COLLAPSED_COUNT && (
    <ViewMoreLinkRow
      expanded={expanded}
      onPress={() => setExpanded(!expanded)}
      accessibilityHint={
        expanded
          ? `Shows the first ${COLLAPSED_COUNT} conversation results`
          : `Shows all ${results.length} conversation results`
      }
    />
  )

  return (
    <ResultsSection title="Conversations" footer={footer}>
      {visible.map((result, index) => (
        <ConversationResultRow
          key={result.id}
          result={result}
          onPress={() => onSelect(result, index)}
        />
      ))}
    </ResultsSection>
  )
}