/** Pure component for each Wallet Request 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 WalletRequestItem extends React.PureComponent {
  /**
  * Navigates to the request details screen
  **/
  onRequestItemSelect(rowData) {
    this.props.navigation.navigate('requestDetailsScreen', rowData);
  }

  /**
  * Creates the requesting users' avatar
  **/
  renderRequestAvatar({ item }) {
    if (item.socialBizCardImg) {
      return (
        <Image
          source={{ uri: item.socialBizCardImg }}
          style={styles.avatarImageStyle}
        />
      );
    }
    return (
      <Icon
        name='account-circle'
        size={75}
        color={colors.lightGrey}
        containerStyle={{ marginRight: 10 }}
      />
    );
  }

  /**
  * Render method
  **/
  render() {
    const item = this.props.item;
    const title = `@${item.tagferId}`;
    const subTitle = (
      <View>
        <Text>{item.fullName} | {item.transactionAmount} TT</Text>
        <Text
          style={{ fontWeight: 'bold', marginTop: 5 }}
          numberOfLines={1}
        >
          {item.requestMessage}
        </Text>
      </View>
    );

    return (
      <ListItem
        roundAvatar
        key={item.uid}
        title={title}
        subtitle={subTitle}
        leftIcon={this.renderRequestAvatar({ item })}
        onPress={() => this.onRequestItemSelect(item)}
        titleStyle={{ fontWeight: 'bold', marginBottom: 5, color: colors.darkGreen }}
      />
    );
  }
}

const styles = {
  avatarImageStyle: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderRadius: 30,
    marginLeft: 10,
    marginRight: 10
  }
};

export default WalletRequestItem;
