import React from 'react'
import { StyleSheet, useWindowDimensions, View } from 'react-native'
import { useTheme } from '../../hooks'
import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'
import { Avatar, Text } from '../display'
import { AVATAR_CONNECTOR_SPACING } from './reply_connectors'

export function MissingMessage() {
  const styles = useStyles()

  return (
    <View style={styles.message} accessibilityLabel="Message deleted">
      <Avatar
        size="md"
        sourceUri=""
        style={styles.avatar}
        maxFontSizeMultiplier={1}
        minFontSizeMultiplier={1}
        fallbackIconName="publishing.trash"
        showFallback
      />
      <View style={styles.messageContent}>
        <View style={styles.messageBubble}>
          <View style={styles.messageText}>
            <Text style={styles.deletedText}>Message deleted</Text>
          </View>
        </View>
      </View>
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  const { width } = useWindowDimensions()
  const tabletWidth = width >= 744

  return StyleSheet.create({
    message: {
      gap: 8,
      flexDirection: 'row',
      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
    },
    avatar: {
      marginBottom: AVATAR_CONNECTOR_SPACING,
    },
    messageContent: {
      flex: 1,
      marginBottom: 16,
    },
    messageBubble: {
      backgroundColor: colors.fillColorNeutral070,
      borderRadius: 8,
      maxWidth: tabletWidth ? 360 : '80%',
      alignSelf: 'flex-start',
    },
    messageText: {
      paddingVertical: 6,
      paddingHorizontal: 8,
    },
    deletedText: {
      color: colors.textColorDefaultSecondary,
      fontStyle: 'italic',
    },
  })
}