import React from 'react'
import { View, StyleSheet } from 'react-native'
import { useDeletingIds } from '../../hooks'
import {
  DenormalizedAttachmentResource,
  DenormalizedMessageAttachmentResource,
} from '../../types/resources/denormalized_attachment_resource'
import { AudioAttachment } from './attachments/audio_attachment'
import { ExpandedLink } from './attachments/expanded_link'
import { GenericFileAttachment } from './attachments/generic_file_attachment'
import { GiphyAttachment } from './attachments/giphy_attachment'
import { ImageAttachment, type MetaProps } from './attachments/image_attachment'
import { VideoAttachment } from './attachments/video_attachment'

export function MessageAttachments(props: {
  attachments: DenormalizedAttachmentResource[]
  metaProps: MetaProps
  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
  onMessageLongPress: () => void
}) {
  const styles = useStyles()
  const { attachments, metaProps, onMessageAttachmentLongPress, onMessageLongPress } = props
  const deletingAttachmentIds = useDeletingIds('deleteAttachment')
  if (!attachments || attachments.length === 0) return null

  const imageAttachments = attachments.filter(
    attachment =>
      attachment.type === 'MessageAttachment' &&
      attachment.attributes?.contentType?.startsWith('image/')
  ) as DenormalizedMessageAttachmentResource[]

  const showImageAttachmentGroup = imageAttachments.length > 0

  return (
    <View style={styles.attachmentsContainer}>
      {showImageAttachmentGroup &&
        imageAttachments.map((image, index) => (
          <ImageAttachment
            key={`${image.id}-${index}`}
            attachment={image}
            imageAttachments={imageAttachments}
            currentImageIndex={index}
            metaProps={metaProps}
            onMessageAttachmentLongPress={onMessageAttachmentLongPress}
            isDeleting={deletingAttachmentIds.has(image.id)}
          />
        ))}

      {attachments.map((attachment, index) => {
        switch (attachment.type) {
          case 'MessageAttachment':
            return (
              <MessageAttachment
                key={`${attachment.id}-${index}`}
                attachment={attachment}
                onMessageAttachmentLongPress={onMessageAttachmentLongPress}
                isDeleting={deletingAttachmentIds.has(attachment.id)}
              />
            )
          case 'giphy':
            return (
              <GiphyAttachment
                key={`${attachment.id || attachment.titleLink}-${index}`}
                attachment={attachment}
                onMessageLongPress={onMessageLongPress}
              />
            )
          case 'ExpandedLink':
            return (
              <ExpandedLink
                key={`${attachment.id}-${index}`}
                attachment={attachment}
                onMessageLongPress={onMessageLongPress}
              />
            )
          default:
            return null
        }
      })}
    </View>
  )
}

function MessageAttachment({
  attachment,
  onMessageAttachmentLongPress,
  isDeleting,
}: {
  attachment: DenormalizedMessageAttachmentResource
  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
  isDeleting: boolean
}) {
  const { attributes } = attachment
  const contentType = attributes?.contentType
  const basicType = contentType ? contentType.split('/')[0] : ''

  switch (basicType) {
    case 'video':
      return (
        <VideoAttachment
          attachment={attachment}
          onMessageAttachmentLongPress={onMessageAttachmentLongPress}
          isDeleting={isDeleting}
        />
      )
    case 'audio':
      return (
        <AudioAttachment
          attachment={attachment}
          onMessageAttachmentLongPress={onMessageAttachmentLongPress}
          isDeleting={isDeleting}
        />
      )
    case 'application':
      return (
        <GenericFileAttachment
          attachment={attachment}
          onMessageAttachmentLongPress={onMessageAttachmentLongPress}
          isDeleting={isDeleting}
        />
      )
    default:
      return null
  }
}

const useStyles = () => {
  return StyleSheet.create({
    attachmentsContainer: {
      gap: 2,
      padding: 2,
    },
  })
}