import { PlatformPressable } from '@react-navigation/elements'
import React from 'react'
import { Text, StyleSheet, Linking } from 'react-native'
import { useTheme } from '../../../hooks'
import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
import { assertKeysAreNumbers } from '../../../utils'
import { tokens } from '../../../vendor/tapestry/tokens'
import { Image } from '../../display'

export function GiphyAttachment({
  attachment,
  onMessageLongPress,
}: {
  attachment: DenormalizedGiphyAttachmentResource
  onMessageLongPress: () => void
}) {
  const { colors } = useTheme()
  const { title, titleLink, giphy } = attachment
  const { url } = giphy.fixedWidth
  const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)
  const styles = useStyles({ imageWidth: width, imageHeight: height })

  function handlePress() {
    if (titleLink) {
      // Open Giphy link in the default web browser
      Linking.openURL(titleLink)
    }
  }

  return (
    <PlatformPressable
      onPress={handlePress}
      onLongPress={onMessageLongPress}
      style={styles.container}
      android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
    >
      <Image
        source={{ uri: url }}
        wrapperStyle={styles.imageWrapper}
        style={styles.image}
        alt={title}
      />
      <Text style={styles.link}>
        <Text style={styles.tag}>/giphy</Text> {title}
      </Text>
    </PlatformPressable>
  )
}

const useStyles = ({ imageWidth, imageHeight }: { imageWidth: number; imageHeight: number }) => {
  const { colors } = useTheme()
  return StyleSheet.create({
    container: {
      gap: 4,
    },
    imageWrapper: {
      width: '100%',
      aspectRatio: imageWidth / imageHeight,
    },
    image: {
      borderRadius: 8,
    },
    link: {
      fontSize: tokens.fontSizeSm,
      color: colors.interaction,
      paddingHorizontal: 8,
      paddingVertical: 6,
    },
    tag: {
      fontWeight: 'bold',
    },
  })
}