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

class ContactImportListItem extends React.PureComponent {
  /**
  * Render method
  **/
  render() {
    const { isChecked, item, onPress } = this.props;

    const title = `${item.fullName}`;
    const subTitle = `${item.jobTitle} ${item.company}`;

    if (item.contactAvatarImg) {
      return (
        <ListItem
          roundAvatar
          key={item.key}
          title={title}
          subtitle={subTitle}
          leftIcon={
            <Image
              source={{ uri: item.contactAvatarImg }}
              style={styles.avatarImageStyle}
            />
          }
          onPress={onPress}
          rightIcon={
            <CheckBox
              checked={isChecked}
              containerStyle={{ backgroundColor: colors.transparent, borderWidth: 0 }}
              onPress={onPress}
            />
          }
        />
      );
    }

    return (
      <ListItem
        roundAvatar
        key={item.key}
        title={title}
        subtitle={subTitle}
        leftIcon={{ name: 'account-circle', size: 50, color: colors.lightGrey }}
        onPress={onPress}
        rightIcon={
          <CheckBox
            checked={isChecked}
            containerStyle={{ backgroundColor: colors.transparent, borderWidth: 0 }}
            onPress={onPress}
          />
        }
      />
    );
  }
}

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

export default ContactImportListItem;
