import React from 'react';
import { ListItem, Avatar } from 'react-native-elements';


import colors from '../../config/colors.json';
import { isEmpty } from '../../utils/aux';
import TagferCheckbox from './TagferCheckbox.js';

const ContactListItem = ({ contact, selected, onPress }) => {
    const { givenName, familyName, phoneNumbers } = contact;
    let fullName = '';
    
    if (!isEmpty(givenName)) fullName += givenName;
    if (!isEmpty(familyName)) fullName += familyName;

    return (
      <ListItem
        roundAvatar
        avatar={<TagferInitialsAvatar firstName={givenName} lastName={familyName} />}
        title={fullName}
        subtitle={phoneNumbers.length !== 0 ? phoneNumbers[0].number : ''}
        subtitleStyle={{ fontSize: 12, fontWeight: 'normal' }}
        titleStyle={{ fontSize: 18, color: colors.black }}
        rightIcon={<TagferCheckbox isChecked={selected} onPress={onPress} />}
        containerStyle={{ backgroundColor: colors.white }}
      />
    );
};

const TagferInitialsAvatar = ({ firstName, lastName }) => {
  let initials = '';
  if (!isEmpty(firstName)) {
    initials += firstName[0];
  }

  if (!isEmpty(lastName)) {
    initials += lastName[0];
  }

  return (
    <Avatar
      small
      rounded
      title={initials.toUpperCase()}
      activeOpacity={0.7}
    />
  );
};

export default ContactListItem;
