import { PlatformPressable } from '@react-navigation/elements'
import React from 'react'
import { Platform, StyleSheet, View } from 'react-native'
import { Icon, Image, Text } from '../../../components'
import { useTheme } from '../../../hooks'
import { platformFontWeightMedium } from '../../../utils'

interface RecipientLinkRowProps {
  onPress: () => void
  accessibilityLabel: string
  accessibilityHint: string
  imageUri?: string
  title: string
  subtitle?: string
}

export const RecipientLinkRow = ({
  onPress,
  accessibilityLabel,
  accessibilityHint,
  imageUri,
  title,
  subtitle,
}: RecipientLinkRowProps) => {
  const styles = useStyles()

  return (
    <PlatformPressable
      style={styles.row}
      onPress={onPress}
      accessibilityRole="link"
      accessibilityLabel={accessibilityLabel}
      accessibilityHint={accessibilityHint}
    >
      <View style={styles.innerContainer}>
        {imageUri && (
          <Image source={{ uri: imageUri }} resizeMode="cover" style={styles.image} alt="" />
        )}
        <View style={styles.content}>
          <Text style={styles.title} numberOfLines={2}>
            {title}
          </Text>
          {subtitle && (
            <Text variant="tertiary" numberOfLines={1}>
              {subtitle}
            </Text>
          )}
        </View>
        {Platform.OS === 'ios' && (
          <Icon name="general.rightChevron" size={16} style={styles.icon} />
        )}
      </View>
    </PlatformPressable>
  )
}

const ASPECT_RATIO = 16 / 9
const THUMBNAIL_WIDTH = 80
const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO

const useStyles = () => {
  const theme = useTheme()

  return StyleSheet.create({
    row: {
      paddingLeft: 16,
    },
    innerContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
      paddingVertical: 16,
      paddingRight: 16,
      borderBottomWidth: 1,
      borderColor: theme.colors.fillColorNeutral050Base,
    },
    image: {
      width: THUMBNAIL_WIDTH,
      height: THUMBNAIL_HEIGHT,
      borderRadius: 4,
    },
    title: {
      fontWeight: platformFontWeightMedium,
      flexShrink: 1,
    },
    content: {
      flexShrink: 1,
      gap: 2,
    },
    icon: {
      marginLeft: 'auto',
      color: theme.colors.iconColorDefaultDisabled,
    },
  })
}