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

import { Artist } from '../types/Artist'
import { CachedImageWithFallback } from './CachedImageWithFallback'

function getArtistImageUris(artist: Artist): string[] {
  return (
    artist.images?.map((image) => image.uri) ??
    (artist.image?.uri ? [artist.image.uri] : [])
  )
}

export const ArtistImage: React.FC<{
  artist: Artist
  size: number
  style?: StyleProp<ViewStyle>
}> = ({ artist, size, style }) => (
  <View
    style={[
      {
        height: size,
        width: size,
        borderRadius: size / 2,
        overflow: 'hidden',
      },
      style,
    ]}
  >
    <CachedImageWithFallback
      style={[{ height: size, width: size }]}
      uris={getArtistImageUris(artist)}
      cacheKey={`artist_${artist.sonyArtistId}`}
      gradientString={artist.sonyArtistId}
    />
  </View>
)