import { Image } from 'expo-image'
import { memo } from 'react'
import { Platform, StyleSheet, View } from 'react-native'
import { Palette } from '../styles'

const DEFAULT_INTENSITY = Platform.select({ ios: 22, default: 14 })

const ProfilePicture = ({
  uri = null,
  size = 48,
  style,
  blurIntensity = DEFAULT_INTENSITY,
  blurTint = 'dark',
  imageProps = {},
  transitionDuration = 120,
  cachePolicy = 'memory-disk',
  contentFit = 'cover',
  accessibilityLabel,
  ...rest
}) => {
  const dimensionStyle = {
    width: size,
    height: size,
    borderRadius: size / 2,
  }

  return (
    <View
      accessible
      accessibilityRole="image"
      accessibilityLabel={accessibilityLabel}
      style={[styles.container, dimensionStyle, style]}
      {...rest}
    >
      {uri ? (
        <Image
          source={{ uri: uri }}
          contentFit={contentFit}
          cachePolicy={cachePolicy}
          transition={transitionDuration}
          style={StyleSheet.absoluteFill}
          {...imageProps}
        />
      ) : (
        <>
          <View style={[styles.fallback, dimensionStyle]} />
        </>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: 'transparent',
  },
  fallback: {
    backgroundColor: '#7373736e',
    borderColor: Palette.ultraLightWhite,
    borderWidth: 2,
  },
})

export default memo(ProfilePicture)