import { StaticScreenProps, useNavigation } from '@react-navigation/native'
import React, { useCallback } from 'react'
import { Alert, Linking, StyleSheet } from 'react-native'
import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
import { useConversation } from '../../hooks/use_conversation'
import { useDeleteAttachment } from './hooks/useDeleteAttachment'

export const AttachmentActionsScreenOptions = getFormSheetScreenOptions({
  headerTitle: 'Attachment actions',
})

export type AttachmentActionsScreenProps = StaticScreenProps<{
  attachmentId: string
  attachmentContentType: string
  attachmentUrl: string
  conversation_id: number
  canDeleteNonAuthoredMessages: boolean
  myMessage: boolean
}>

export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps) {
  const navigation = useNavigation()
  const {
    attachmentId,
    attachmentContentType,
    attachmentUrl,
    conversation_id,
    canDeleteNonAuthoredMessages,
    myMessage,
  } = route.params

  const { data: conversation } = useConversation({ conversation_id }, { refetchOnMount: false })
  const attachmentName = getAttachmentLabelName(attachmentContentType)
  const canDelete = !conversation.disabled && (myMessage || canDeleteNonAuthoredMessages)
  const styles = useStyles()

  const { handleDeleteAttachment } = useDeleteAttachment({
    conversation_id,
    attachmentId,
    attachmentName,
  })

  const handleDeleteConfirm = useCallback(() => {
    Alert.alert(
      `Delete ${attachmentName}`,
      'Are you sure you want to permanently delete this attachment?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: () => {
            handleDeleteAttachment()
            navigation.goBack()
          },
        },
      ]
    )
  }, [attachmentName, handleDeleteAttachment, navigation])

  const handleOpenInBrowser = () => {
    Linking.openURL(attachmentUrl)
    navigation.goBack()
  }

  return (
    <FormSheet.Root contentStyle={styles.formSheetContent}>
      <FormSheet.Action
        iconName="general.newWindow"
        title="Open in browser"
        accessibilityRole="link"
        accessibilityLabel={`Open ${attachmentName} in browser`}
        accessibilityHint={`${attachmentName} can be downloaded and shared through the browser.`}
        onPress={handleOpenInBrowser}
      />
      {canDelete && (
        <FormSheet.Action
          appearance="danger"
          iconName="publishing.trash"
          title={`Delete ${attachmentName}`}
          onPress={handleDeleteConfirm}
        />
      )}
    </FormSheet.Root>
  )
}

const useStyles = () => {
  return StyleSheet.create({
    formSheetContent: {
      paddingTop: 16,
    },
  })
}

function getAttachmentLabelName(contentType: string) {
  if (contentType.startsWith('image/')) return 'image'
  if (contentType.startsWith('video/')) return 'video'
  if (contentType.startsWith('audio/')) return 'audio'
  if (contentType === 'application/pdf') return 'PDF'
  if (contentType.startsWith('application/')) return 'file'

  return ''
}