// Avatar component
// if user has no avatar, show the first letter of the name
// if user has an avatar, show the avatar
// if user has no name and no avatar, show a default avatar

// props:
// name: string
// avatar: string
// size: number
// style: object
// onPress: function

import React from 'react'
import { StyleSheet, View, Image, TouchableOpacity } from 'react-native'
import Text from './Text'
import { colors } from '../theme'

const Avatar = ({
  backgroundColor,
  name,
  avatar,
  size = 40,
  style,
  onPress,
}) => {

  if(!avatar && name.length < 1) return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={{
          ...styles.container,
          backgroundColor: backgroundColor || colors.n_500,
          width: size,
          height: size,
          borderRadius: size / 2,
          ...style,
        }}
      >
       
          <Image source={{ uri: `http://165.22.31.175:5000/public/file_store/images/user/default-avatar.png` }} style={styles.image} />
        
      </View>
    </TouchableOpacity>

  )

 if(name && !avatar) return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={{
          ...styles.container,
          backgroundColor: backgroundColor || colors.n_500,
          width: size,
          height: size,
          borderRadius: size / 2,
          ...style,
        }}
      >
        
          <Text
            weight='bold'
            color={colors.white}
            style={{ textTransform: 'uppercase', fontSize: size * 0.64 }}
          >
            {name[0]}
          </Text>
        
      </View>
    </TouchableOpacity>
  )

  return (
    <TouchableOpacity onPress={onPress}>
      <View

        style={{
          ...styles.container,
          backgroundColor: backgroundColor || colors.n_500,
          width: size,
          height: size,
          borderRadius: size / 2,
          ...style,
        }}
      >

          <Image source={{ uri: avatar }} style={styles.image} />

      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
    borderRadius: 100,
  },
})

export default Avatar