import React from 'react'
import { StyleSheet, View } from 'react-native'
import { ConversationAvatar, Text } from '../../../components/display'
import { useScalableNumberOfLines } from '../../../hooks'
import type { MessageSearchResultResource } from '../../../types/resources/search_result'
import { platformFontWeightMedium } from '../../../utils'
import { formatDatePreview } from '../../../utils/date'
import { ResultRow } from './result_row'
import { plainSnippetText, Snippet } from './snippet'

interface MessageResultRowProps {
  result: MessageSearchResultResource
  onPress: (result: MessageSearchResultResource) => void
}

export function MessageResultRow({ result, onPress }: MessageResultRowProps) {
  const { authorName, avatar, snippet, createdAt } = result.extra
  const titleNumberOfLines = useScalableNumberOfLines(1)
  const previewNumberOfLines = useScalableNumberOfLines(2)
  const date = formatDatePreview(createdAt)
  const accessibilityLabel = `${result.title}, ${authorName}: ${plainSnippetText(snippet)}, ${date}`

  return (
    <ResultRow accessibilityLabel={accessibilityLabel} onPress={() => onPress(result)}>
      <ConversationAvatar conversation={avatar} size="lg" />
      <View style={styles.body}>
        <Text numberOfLines={titleNumberOfLines} style={styles.title}>
          {result.title}
        </Text>
        <Text variant="tertiary" numberOfLines={previewNumberOfLines}>
          {authorName}: <Snippet segments={snippet} />
        </Text>
      </View>
      <Text variant="footnote">{date}</Text>
    </ResultRow>
  )
}

const styles = StyleSheet.create({
  body: {
    flex: 1,
    rowGap: 2,
  },
  title: {
    fontSize: 16,
    fontWeight: platformFontWeightMedium,
  },
})