import { Text, View } from 'react-native'
import { Image as ExpoImage } from 'expo-image'
import { responsiveWidth } from '../actions/responsiveSizes.js'
import { getInitials } from '../helpers'
import { Fonts, Style } from '../styles'

export default ({ name = '', url = null, size = responsiveWidth(7), containerStyle = {} }) => {
  const colors = [
    '#FB68A8',
    '#FA6DA8',
    '#F971A7',
    '#F876A7',
    '#F67BA6',
    '#F580A6',
    '#F384A5',
    '#F289A5',
    '#F08EA4',
    '#EF93A4',
    '#ED97A3',
    '#EC9CA3',
    '#EAA1A2',
    '#E8A6A2',
    '#E7AAA1',
    '#E5AFA1',
    '#E3B4A0',
    '#E2B9A0',
    '#E0BDAF',
    '#DFC2AE',
    '#DDC7AE',
    '#DBCBAE',
    '#DACFAE',
    '#D8D4AE',
    '#D6D8AE',
    '#D5DCAE',
    '#D3E1AE',
    '#D2E5AE',
    '#D0E9AE',
    '#CFEDAE',
  ]

  const pickColor = (name) => {
    const sumChars = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
    const index = sumChars % 30

    return colors[index]
  }

  return (
    <View
      style={{
        ...Style.containerRound,
        width: size,
        height: size,
        backgroundColor: pickColor(name),
        ...containerStyle,
      }}
    >
      {url ? (
        <ExpoImage
          source={{ uri: url }}
          cachePolicy="memory-disk"
          priority="high"
          contentFit="cover"
          transition={100}
          style={{
            width: size,
            height: size,
            borderRadius: size / 2,
          }}
        />
      ) : (
        <Text style={Fonts({ type: 'section', style: { fontSize: size / 3 } })}>
          {getInitials(name)}
        </Text>
      )}
    </View>
  )
}