import React from 'react'
import { View, StyleSheet, ViewStyle } from 'react-native'
import { Avatar, Text, Icon } from '../../../components'
import { useTheme, useFontScale } from '../../../hooks'
import { MessageResource } from '../../../types'

interface MessagePreviewProps {
  message: MessageResource
  style?: ViewStyle
}

export function MessagePreview({ message, style }: MessagePreviewProps) {
  const hasImages = message.attachments.some(
    att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/')
  )

  const imageOnly = hasImages && !message.text
  const styles = useStyles({ imageOnly })

  return (
    <View style={[styles.previewContainer, style]}>
      <View style={styles.previewHeader}>
        <Avatar sourceUri={message.author.avatar} size="md" />
        <Text style={styles.authorName} maxFontSizeMultiplier={1.5} numberOfLines={1}>
          {message.author.name}
        </Text>
      </View>

      <View style={styles.messageBubble}>
        {hasImages && (
          <View style={styles.imagePlaceholder}>
            <Icon
              name="general.image"
              style={styles.placeholderIcon}
              maxFontSizeMultiplier={1.25}
            />
            <Text variant="secondary" style={styles.placeholderText} maxFontSizeMultiplier={1.25}>
              Image hidden
            </Text>
          </View>
        )}

        {message.text && (
          <Text style={styles.messageText} numberOfLines={5}>
            {message.text}
          </Text>
        )}
      </View>
    </View>
  )
}

const useStyles = ({ imageOnly }: { imageOnly: boolean }) => {
  const { colors } = useTheme()
  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.5 })

  return StyleSheet.create({
    previewContainer: {
      gap: 12,
    },
    previewHeader: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
    },
    authorName: {
      fontSize: 14,
      fontWeight: '600',
      color: colors.textColorDefaultPrimary,
      flexShrink: 1,
    },
    messageBubble: {
      backgroundColor: colors.fillColorNeutral060,
      borderRadius: 16,
      alignSelf: 'flex-start',
      ...(!imageOnly && { maxWidth: '80%' }),
    },
    messageText: {
      fontSize: 14,
      color: colors.textColorDefaultPrimary,
      lineHeight: 20,
      paddingHorizontal: 16,
      paddingVertical: 12,
    },
    imagePlaceholder: {
      paddingHorizontal: 24 * fontScale,
      paddingVertical: 20 * fontScale,
      justifyContent: 'center',
      alignItems: 'center',
      gap: 8 * fontScale,
    },
    placeholderIcon: {
      fontSize: 32,
      color: colors.iconColorDefaultSecondary,
    },
    placeholderText: {
      fontSize: 14,
    },
  })
}