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

class ContactItem extends React.PureComponent {
  /**
  * When a contact is selected it goes to the edit contact screen
  **/
  onContactSelect(rowData) {
    this.props.navigation.navigate('contactEdit', rowData);
  }

  /**
  * When a friend is selected it goes to the edit friend screen
  **/
  onFriendSelect(rowData) {
    this.props.navigation.navigate('socialEditScreen', rowData);
  }

  /**
  * Creates the contact avatar
  **/
  renderAvatar({ item }) {
    if (item.otherProfileId) {
      if (item.profileAvatarImg) {
        return (
          <Image
            source={{ uri: item.profileAvatarImg }}
            style={styles.avatarImageStyle}
          />
        );
      }
      return (
        <Icon
          name='account-circle'
          size={50}
          color={colors.lightGrey}
        />
      );
    }
    // Phone contact
    if (item.contactAvatarImg) {
      return (
        <Image
          source={{ uri: item.contactAvatarImg }}
          style={styles.avatarImageStyle}
        />
      );
    }
    return (
      <Icon
        name='account-circle'
        size={50}
        color={colors.lightGrey}
      />
    );
  }

  /**
  * Render method
  **/
  render() {
    const item = this.props.item;
    let title = '';
    let subTitle = '';

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

      return (
        <ListItem
          roundAvatar
          key={item.uid}
          title={title}
          subtitle={subTitle}
          leftIcon={this.renderAvatar({ item })}
          onPress={() => this.onFriendSelect(item)}
          titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
        />
      );
    }
    title = `${item.fullName}`;
    subTitle = `${item.titleAndCompany || ''}`;

    return (
      <ListItem
        roundAvatar
        key={item.uid}
        title={title}
        subtitle={subTitle}
        leftIcon={this.renderAvatar({ item })}
        onPress={() => this.onContactSelect(item)}
      />
    );
  }
}

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

export default ContactItem;
