import { PlatformPressable } from '@react-navigation/elements'
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useTheme } from '../../../hooks'
import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
import { Linking, getAttachmentIconName } from '../../../utils'
import { tokens } from '../../../vendor/tapestry/tokens'
import { Icon } from '../../display'
import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'

export function GenericFileAttachment({
  attachment,
  onMessageAttachmentLongPress,
  isDeleting,
}: {
  attachment: DenormalizedMessageAttachmentResource
  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
  isDeleting: boolean
}) {
  const styles = useStyles()
  const { colors } = useTheme()

  const { url, filename, contentType } = attachment.attributes
  const iconName = getAttachmentIconName(contentType)
  const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'

  async function handleDownload() {
    if (url) {
      // Open link in the default web browser
      Linking.openURL(url)
    }
  }

  return (
    <PlatformPressable
      onPress={handleDownload}
      onLongPress={() => !isDeleting && onMessageAttachmentLongPress(attachment)}
      android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
      accessibilityRole="link"
      accessibilityHint={`Press to open ${fileTypeLabel} in a browser. Long press for more options`}
      disabled={isDeleting}
    >
      <AttachmentCard>
        <View style={styles.container}>
          <View style={styles.stack}>
            <Icon name={iconName} style={styles.icon} />
            <AttachmentCardTitle>{filename}</AttachmentCardTitle>
          </View>
        </View>
        {isDeleting && <AttachmentDeletingOverlay />}
      </AttachmentCard>
    </PlatformPressable>
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    container: {
      gap: 4,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    stack: {
      gap: 4,
      flexDirection: 'row',
      alignItems: 'center',
    },
    icon: {
      color: colors.textColorDefaultPrimary,
      fontSize: tokens.fontSizeMd,
    },
  })
}