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

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

  /**
  * Render method
  **/
  render() {
    const { isChecked, item, onPress, hasCheckBox } = this.props;

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

    if (item.profileAvatarImg) {
      if (hasCheckBox) {
        return (
          <ListItem
            roundAvatar
            key={item.uid}
            title={title}
            subtitle={subTitle}
            titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
            leftIcon={this.renderAvatar({ item })}
            onPress={onPress}
            rightIcon={
              <CheckBox
                checked={isChecked}
                containerStyle={{ backgroundColor: colors.transparent, borderWidth: 0 }}
                onPress={onPress}
              />
            }
          />
        );
      }
      // Don't display the checkbox - for Event Details Screen
      return (
        <ListItem
          roundAvatar
          key={item.uid}
          title={title}
          subtitle={subTitle}
          titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
          leftIcon={this.renderAvatar({ item })}
          onPress={onPress}
          rightIcon={
            <View />
          }
        />
      );
    }

    if (hasCheckBox) {
      return (
        <ListItem
          roundAvatar
          key={item.key}
          title={title}
          subtitle={subTitle}
          titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
          leftIcon={{ name: 'account-circle', size: 50, color: colors.lightGrey }}
          onPress={onPress}
          rightIcon={
            <CheckBox
              checked={isChecked}
              containerStyle={{ backgroundColor: colors.transparent, borderWidth: 0 }}
              onPress={onPress}
            />
          }
        />
      );
    }
    // Don't display the checkbox - for Event Details Screen
    return (
      <ListItem
        roundAvatar
        key={item.key}
        title={title}
        subtitle={subTitle}
        titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
        leftIcon={{ name: 'account-circle', size: 50, color: colors.lightGrey }}
        onPress={onPress}
        rightIcon={
          <View />
        }
      />
    );
  }
}

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

export default SpeakerListItem;
