/**
 * 信用卡列表
 * @邠心vbe on 2021/05/11
 */
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import apiWallet from '../../api/apiWallet';
import { ElevationObject } from '../../components/Button';

export class CardList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardList: [],
      refreshId: 0,
    };
  }

  componentDidMount() {
    this.refreshCardList();
  }

  componentDidUpdate() {
    if (this.state.refreshId != this.props.refreshId) {
      this.setState({
        refreshId: this.props.refreshId,
      });
      this.refreshCardList();
    }
  }

  refreshCardList() {
    apiWallet.getCardList().then(res => {
      if (res.data) {
        this.setState({
          cardList: res.data
        });
      }
    }).catch(err => {
  
    });
  }

  getSecuryNumber(number) {
    const last = number.substring(number.length - 2);
    var x = ''
    for (let i = 0; i < number.length - 2; i++) {
      x += 'X';
    }
    return x + last;
  }

  render() {
    return (
      this.state.cardList.length > 0
      ? this.state.cardList.map((item, index) => {
          return (
            <View
              key={index}
              style={styles.accountView}>
              <Image
                style={styles.bgAccount}
                source={require('../../images/user/bg-item-card.png')}/>
              <View style={styles.accountRow}>
                <View style={ui.flex1}>
                  <View style={styles.accountRow}>
                    <Image
                      style={styles.accountLogo}
                      source={require('../../images/user/account-visa.png')}/>
                    <View>
                      <Text
                        ellipsizeMode='tail'
                        numberOfLines={1}
                        style={styles.accountName}>{item.nameOnCard}</Text>
                      <Text style={styles.accountType}>({item.validTill})</Text>
                    </View>
                  </View>
                  <Text style={styles.accountNumber}>{this.getSecuryNumber(item.cardNumber) + ' - ' + item.cardCvv}</Text>
                </View>
                <FontAwesome
                  size={24}
                  color={colorAccent}
                  name='angle-right'/>
              </View>
            </View>
          );
        })
      : <Text style={ui.noData}>No Cards</Text>
    );
  }
}

const styles = StyleSheet.create({
  accountView: {
    padding: 16,
    borderRadius: 10,
    overflow: 'hidden',
    marginBottom: 16, 
    borderColor: '#f5f5f5',
    borderWidth: 1,
    backgroundColor: 'white',
    ...ElevationObject(1.5)
  },
  bgAccount: {
    left: 0,
    bottom: 0,
    width: 69.5,
    height: 21,
    position: 'absolute'
  },
  accountRow: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row'
  },
  accountLogo: {
    width: 36,
    height: 18,
    marginRight: 12
  },
  accountName: {
    color: '#000',
    fontSize: 14
  },
  accountType: {
    color: '#333',
    fontSize: 12
  },
  accountNumber: {
    color: '#000',
    fontSize: 15,
    paddingTop: 16
  },
})