import { View, StyleSheet } from 'react-native'
import { useTheme } from '../../hooks'
import { tokens } from '../../vendor/tapestry/tokens'
import { Icon } from './icon'
import { IconButton } from './icon_button'
import { Image } from './image'

type ImageSizeUnion = 'sm' | 'md'

interface ImageAttachmentPreviewProps {
  fileName: string
  uri: string
  size?: ImageSizeUnion
  onRemovePress: () => void
  loading?: boolean
  hideRemoveButton?: boolean
  error?: boolean
}

export const ImageAttachmentPreview = ({
  uri,
  fileName,
  size = 'md',
  onRemovePress,
  loading = false,
  hideRemoveButton = false,
  error = false,
}: ImageAttachmentPreviewProps) => {
  const styles = useStyles({ size, error })

  return (
    <View style={styles.container}>
      {!hideRemoveButton && (
        <IconButton
          name="general.x"
          onPress={onRemovePress}
          size="xxs"
          appearance="neutral"
          style={styles.closeButton}
          accessibilityLabel="Remove image attachment"
        />
      )}
      <Image
        source={{ uri }}
        style={styles.image}
        alt={`Attached ${fileName}`}
        resizeMode="cover"
        loading={loading}
        loaderSize={size === 'sm' ? 20 : 24}
      />
      {error && (
        <View style={styles.errorBadge}>
          <Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon} />
        </View>
      )}
    </View>
  )
}

const useStyles = ({ size = 'md', error = false }: Partial<ImageAttachmentPreviewProps>) => {
  const { colors } = useTheme()
  const borderRadius = 8

  const imageSizeMap = {
    sm: 60,
    md: 80,
  }
  const errorIconSizeMap = {
    sm: 10,
    md: 12,
  }

  return StyleSheet.create({
    container: {
      width: imageSizeMap[size],
      height: imageSizeMap[size],
      overflow: 'hidden',
      borderRadius: borderRadius,
      borderWidth: error ? 2 : 1,
      borderColor: error ? colors.statusErrorBorder : colors.borderColorDefaultBase,
    },
    image: {
      opacity: error ? 0.5 : 1,
    },
    closeButton: {
      position: 'absolute',
      top: 4,
      right: 4,
      zIndex: 2,
      backgroundColor: colors.fillColorNeutral050Base,
      borderRadius: 16,
      height: 20,
      width: 20,
    },
    errorBadge: {
      backgroundColor: colors.statusErrorBorder,
      position: 'absolute',
      bottom: 0,
      right: 0,
      zIndex: 2,
      borderStartStartRadius: borderRadius,
      padding: 4,
    },
    errorIcon: {
      color: tokens.colorNeutral100White,
      transform: [{ translateX: 1 }],
      fontSize: errorIconSizeMap[size],
    },
  })
}