/** Pure component for each Event Details Attendee Item **/
import React from 'react';
import { Image, Text, View } from 'react-native';
import { ListItem } from 'react-native-elements';
import colors from '../../config/colors.json';

class EventDetailsAttendeeItem extends React.PureComponent {
  /**
  * Creates the contact avatar
  **/
  renderAvatar({ profile }) {
    return (
      <Image
        source={{ uri: profile.profileAvatarImg }}
        style={styles.avatarImageStyle}
      />
    );
  }

  /**
  * Render method
  **/
  render() {
    const { item } = this.props;
    const { profile } = item;

    const title = `@${profile.tagferId}`;
    const subTitle = (
      <View>
        <Text>{profile.fullName || ''}</Text>
        <Text>{profile.titleAndCompany || ''}</Text>
      </View>
    );

    if (item.profileAvatarImg) {
      return (
        <ListItem
          roundAvatar
          key={item.uid}
          title={title}
          subtitle={subTitle}
          titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
          leftIcon={this.renderAvatar({ profile })}
          rightIcon={
            <View />
          }
        />
      );
    }

    return (
      <ListItem
        roundAvatar
        key={item.uid}
        title={title}
        subtitle={subTitle}
        titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
        leftIcon={{ name: 'account-circle', size: 50, color: colors.lightGrey }}
        rightIcon={
          <View />
        }
      />
    );
  }
}

const styles = {
  avatarImageStyle: {
    width: 40,
    height: 40,
    borderWidth: 1,
    borderRadius: 20,
    marginLeft: 5,
    marginRight: 10
  }
};

export default EventDetailsAttendeeItem;
