/**
 * 钱包明细页面
 * @邠心vbe on 2021/05/08
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, Pressable } from 'react-native';
import apiWallet from '../../api/apiWallet';
import TextView from '../../components/TextView';
import { PageList } from '../Router';

const IconCharge = require('../../images/wallet/ic-type-charge.png');
const IconPayment = require('../../images/wallet/ic-type-payment.png');

export default class History extends Component {
  constructor(props) {
    super(props);
    this.state = {
      historyList: []
    };
    this.refreshing = false;
  }

  componentDidMount() {
    this.getHistory(true);
  }

  componentDidUpdate() {
    if (this.props.refresh && !this.refreshing && this.props.shown) {
      this.refreshing = true;
      this.getHistory(true);
    }
  }

  getLastPk() {
    if (this.state.historyList.length > 0) {
      return this.state.historyList[this.state.historyList.length-1].creditRecordPk;
    }
    return null;
  }

  getHistory(refresh) {
    apiWallet.getTransactionList({latestPk: refresh ? '' : this.getLastPk()}).then(res => {
      this.stopRefresh();
      if (res.data) {
        if (refresh) {
          this.setState({
            historyList: res.data
          });
        } else {
          const list = this.state.historyList;
          this.setState({
            historyList: list.concat(res.data)
          });
        }
      }
    }).catch(err => {
      this.stopRefresh();
    });
  }

  stopRefresh() {
    if (this.props.refreshed) {
      this.props.refreshed();
    }
    this.refreshing = false;
  }

  toSummary(index) {
    const station = this.state.historyList[index];
    if (station.refPk) {
      startPage(PageList.summary, { action: 'view', chargingPk: station.refPk });
    }
  }

  render() {
    return (
      <View style={this.props.shown ? ui.flex1 : styles.hide}>
        {/* <View style={ui.flexcc}>
          <Text style={styles.rangeText}>9th Aug to 12th Aug</Text>
          <MaterialIcons
            name='arrow-drop-down'
            color={colorDark}
            size={28}/>
        </View> */}
        <View style={styles.listView}>
        { this.state.historyList.length > 0
          ? this.state.historyList.map((item, index) => {
              return (
                <Pressable
                  key={index}
                  android_ripple={ripple}
                  style={styles.itemView}
                  onPress={() => {
                    this.toSummary(index)
                  }}>
                  <Image
                    style={styles.iconType}
                    resizeMode="contain"
                    source={item.amountSymbol == 'M' ? IconCharge : IconPayment}/>
                  <View style={[styles.itemContent, index > 0 && styles.divide]}>
                    <View style={ui.flex1}>
                      <TextView style={styles.issueName}>{item.createTime + ': ' + (item.amountSymbol == 'M' ? item.siteName : $t('wallet.topUp') + ' ' + item.amount)}</TextView>
                      <TextView style={styles.issueDesc}>{$t('wallet.labelTransactionId') + item.creditRecordPk}</TextView>
                    </View>
                    { item.amountSymbol == 'M'
                      ? <TextView style={styles.amountDuct}>- {item.amount}</TextView>
                      : <TextView style={styles.amountText}>+ {item.amount}</TextView>
                    }
                  </View>
                </Pressable>
              );
            })
          : <Text style={styles.noResult}>{$t('wallet.noHistoryData')}</Text>
        }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  hide: {
    display: 'none'
  },
  rangeText: {
    color: '#000',
    fontSize: 14
  },
  listView: {
    marginTop: 16,
    minHeight: $vh(30),
    backgroundColor: colorLight
  },
  noResult: {
    color: '#999',
    fontSize: 14,
    padding: 20,
    lineHeight: $vh(20),
    textAlign: 'center',
  },
  itemView: {
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  itemContent: {
    flex: 1,
    marginLeft: 16,
    ...$padding(16, 4),
    alignItems: 'center',
    flexDirection: 'row'
  },
  divide: {
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  iconType: {
    width: 28,
    height: 28
  },
  issueName: {
    color: textPrimary,
    fontSize: 12,
    paddingBottom: 2
  },
  issueDesc: {
    color: '#999',
    fontSize: 11
  },
  amountDuct: {
    color: '#FF2E00',
    fontSize: 14
  },
  amountText: {
    color: textPrimary,
    fontSize: 14
  }
})