import { Pressable } from 'react-native'
import AutolinkText, { onMentionPressMethod } from 'src/components/common/AutolinkText'
import EmojiText from 'src/components/common/EmojiText'
import UserAvatar from 'src/components/common/UserAvatar'
import ImageComponent from 'src/components/ImageComponent'
import type { CustomEmoji } from 'src/lib/api-types'
import { timeAgo } from 'src/utils'
import { Text, useTheme, View, XStack, YStack } from 'tamagui'

export type ChatMessageAccount = {
  id: string
  username: string
  displayName?: string | null
  avatar: string
  url?: string
  emojis?: CustomEmoji[]
}

export type ChatMessage = {
  id: string
  text: string | null
  createdAt: string | Date
  isSelf: boolean
  account: ChatMessageAccount
  image?: string | null
  reportId?: string
}

type ChatMessageRowProps = {
  message: ChatMessage
  onLongPress: (message: ChatMessage) => void
  onAvatarPress: (accountId: string) => void
  onMentionPress: (username: string) => void
  onHashtagPress: (tag: string) => void
}

export default function ChatMessageRow({
  message,
  onLongPress,
  onAvatarPress,
  onMentionPress,
  onHashtagPress,
}: ChatMessageRowProps) {
  const theme = useTheme()

  return (
    <Pressable onLongPress={() => onLongPress(message)} delayLongPress={250}>
      <View flex={1} padding={15} bg="$background">
        <XStack gap="$3" flexGrow={1}>
          <UserAvatar
            url={message.account.avatar}
            onPress={() => onAvatarPress(message.account.id)}
            hitSlop={8}
            size="md"
          />

          <YStack flexGrow={1} flexShrink={1} gap={4}>
            <XStack gap="$2" alignItems="center">
              <Pressable onPress={() => onAvatarPress(message.account.id)} hitSlop={7}>
                <EmojiText
                  variant="subhead"
                  text={message.account.displayName?.trim() || message.account.username}
                  emojis={message.account.emojis}
                  fontWeight="600"
                  color={theme.colorSecondary.val}
                  numberOfLines={1}
                />
              </Pressable>
              <Text fontSize="$3" color={theme.colorTertiary.val}>
                {timeAgo(
                  typeof message.createdAt === 'string'
                    ? message.createdAt
                    : message.createdAt.toISOString()
                )}
              </Text>
            </XStack>

            {message.image ? (
              <ImageComponent
                source={{ uri: message.image, width: 200, height: 200 }}
                style={{ width: 200, height: 200, borderRadius: 10 } as any}
                resizeMode={'cover' as any}
              />
            ) : null}

            {message.text ? (
              <AutolinkText
                text={message.text}
                onMentionPress={onMentionPressMethod(
                  onMentionPress,
                  message.account.url ?? ''
                )}
                onHashtagPress={onHashtagPress}
              />
            ) : null}
          </YStack>
        </XStack>
      </View>
    </Pressable>
  )
}
