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

export function ExpandedLink({
  attachment,
  onMessageLongPress,
}: {
  attachment: DenormalizedExpandedLinkAttachmentResource
  onMessageLongPress: () => void
}) {
  const styles = useStyles()
  const { colors } = useTheme()
  const { attributes } = attachment
  const { url, title, description, imageUrl, imageHeight, imageWidth } = attributes

  const aspectRatio = imageWidth && imageHeight ? imageWidth / imageHeight : 1

  async function openUrl() {
    if (url) Linking.openURL(url)
  }

  return (
    <PlatformPressable
      style={styles.container}
      android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
      onPress={openUrl}
      onLongPress={onMessageLongPress}
    >
      {imageUrl && (
        <Image source={{ uri: imageUrl }} style={[styles.image, { aspectRatio }]} alt={title} />
      )}
      {(title || description) && (
        <View style={styles.textWrapper}>
          {title && <Text style={styles.title}>{title}</Text>}
          {description && <Text style={styles.description}>{description}</Text>}
        </View>
      )}
    </PlatformPressable>
  )
}

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

  return StyleSheet.create({
    container: {},
    image: {
      borderRadius: 8,
      width: '100%',
    },
    textWrapper: {
      gap: 4,
      padding: 8,
    },
    title: {
      fontSize: tokens.fontSizeSm,
      fontWeight: tokens.fontWeightMedium,
      color: colors.textColorDefaultPrimary,
    },
    description: {
      fontSize: tokens.fontSizeXs,
      color: colors.textColorDefaultPrimary,
    },
  })
}