/** Pure component for each Wallet Transaction Item **/
import React from 'react';
import { Text, View } from 'react-native';
import { Icon, ListItem } from 'react-native-elements';
import { EVENT_TRANSACTION, EARNED_TRANSACTION, RECEIVED_TRANSACTION, REQUESTED_TRANSACTION, SENT_TRANSACTION } from '../../components/TransactionTypes';
import colors from '../../config/colors.json';

class WalletTransactionItem extends React.PureComponent {
  /**
  * Navigates to the transaction details screen
  **/
  onTransactionItemSelect(rowData) {
    this.props.navigation.navigate('transactionDetailsScreen', rowData);
  }

  /**
  * Creates the requesting users' avatar
  **/
  renderTransactionAvatar({ item }) {
    switch (item.transactionType) {
      case EVENT_TRANSACTION:
        return (
          <Icon
            name={'event'}
            size={25}
            color={colors.buttonBlue}
            containerStyle={{ marginRight: 5, marginLeft: -5 }}
          />
        );
      case EARNED_TRANSACTION:
        return (
          <Icon
            name={'trophy'}
            type='entypo'
            size={25}
            color={colors.teal}
            containerStyle={{ marginRight: 5, marginLeft: -5 }}
          />
        );
      case RECEIVED_TRANSACTION:
        return (
          <Icon
            name={'arrow-long-left'}
            type='entypo'
            size={25}
            color={colors.green}
            containerStyle={{ marginRight: 5, marginLeft: -5 }}
          />
        );
      case REQUESTED_TRANSACTION:
        return (
          <Icon
            name={'hand'}
            type='entypo'
            size={25}
            color={colors.pink}
            containerStyle={{ marginRight: 5, marginLeft: -5 }}
          />
        );
      case SENT_TRANSACTION:
        return (
          <Icon
            name={'arrow-long-right'}
            type='entypo'
            size={25}
            color={colors.orange}
            containerStyle={{ marginRight: 5, marginLeft: -5 }}
          />
        );
      default:
        break;
    }
  }

  /**
  * 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.transactionMessage}
        </Text>
      </View>
    );

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

export default WalletTransactionItem;
