import { StyleSheet } from 'react-native'
import { ConversationAvatar, Heading } from '../../../components'
import { useScalableNumberOfLines, useTheme } from '../../../hooks'
import type { ConversationSearchResultResource } from '../../../types'
import { ResultRow } from './result_row'

interface ConversationResultRowProps {
  result: ConversationSearchResultResource
  onPress: () => void
}

export function ConversationResultRow({ result, onPress }: ConversationResultRowProps) {
  const styles = useStyles()
  const numberOfLines = useScalableNumberOfLines(1)

  return (
    <ResultRow accessibilityLabel={result.title} onPress={onPress} alignItems="center">
      <ConversationAvatar conversation={result.extra.avatar} size="lg" />
      <Heading variant="h3" numberOfLines={numberOfLines} style={styles.title}>
        {result.title}
      </Heading>
    </ResultRow>
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    title: {
      flex: 1,
      fontSize: 16,
      color: colors.textColorDefaultPrimary,
    },
  })
}