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

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

const ContactListItem = ({ contact, selected, onPress }) => {
    const { givenName, familyName, phoneNumbers } = contact;
    const fullName = `${contact.givenName} ${contact.familyName}`;

    return (
      <ListItem
        roundAvatar
        avatar={<TagferAvatar 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 TagferCheckbox = ({ isChecked, onPress }) => (
  <CheckBox
    iconRight
    iconType='ionicon'
    checkedIcon='ios-checkmark-circle'
    uncheckedIcon='ios-add-circle-outline'
    onIconPress={onPress}
    onPress={onPress}
    uncheckedColor={colors.addGreen}
    checkedColor={colors.labelBlue}
    checked={isChecked}
    size={36}
    containerStyle={{ backgroundColor: colors.transparent, borderWidth: 0, margin: 0, padding: 0, marginRight: 0 }}
  />
);

const TagferAvatar = ({ 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;
