import React from 'react'
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'

import { ProductImageFieldsFragment } from '../graphql/__generated__/sdk'
import { Strings } from '../i18n'
import Explicit from '../icons/Explicit'
import { CachedImageWithFallback } from './CachedImageWithFallback'
import { ListItemRank } from './ListItemRank'

const Styles = StyleSheet.create({
  rank: {
    position: 'absolute',
    zIndex: 10,
    top: 4,
    left: -10,
  },
  explicit: {
    position: 'absolute',
    top: -3,
    right: -3,
    zIndex: 10,
  },
  image: {
    flex: 1,
    borderRadius: 4,
  },
})

export const ProductImage: React.FC<{
  product: ProductImageFieldsFragment
  isExplicit: boolean
  rank?: number
  style?: StyleProp<ViewStyle>
  size?: number
}> = ({ product, isExplicit, rank, style, size = 64 }) => (
  <View style={[{ width: size, height: size }, style]}>
    {rank != null ? (
      <View style={Styles.rank}>
        <ListItemRank index={rank} />
      </View>
    ) : null}
    {isExplicit ? (
      <View
        style={Styles.explicit}
        accessibilityLabel={Strings.Accessibility.Explicit}
      >
        <Explicit />
      </View>
    ) : null}
    <CachedImageWithFallback
      uris={product.image?.uri ? [product.image.uri] : []}
      cacheKey={`product_${product.id}`}
      gradientString={product.id}
      style={Styles.image}
    />
  </View>
)