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

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 = {
      loading: true,
      historyList: [],
      loadingList: ["", "", "", "", ""]
    };
    this.refreshing = false;
  }

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

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

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

  getHistory() {
    if (app.v3.overview) {
      this.getHistoryV2();
      return;
    }
    apiWallet.getTransactionList({latestPk: ''}).then(res => {
      if (res.data) {
        this.setState({
          historyList: res.data
        });
      }
    }).catch(err => {
      this.setState({
        historyList: []
      });
    }).finally(() => {
      this.setState({
        loading: false,
      });
      this.stopRefresh();
    });
  }

  getHistoryV2() {
    apiWallet.getTransactionListV2({latestPk: ''}).then(res => {
      if (res.data && res.data.length) {
        this.setState({
          historyList: res.data.slice(0, 10)
        });
      } else {
        this.setState({
          historyList: []
        });
      }
    }).catch(err => {
      this.setState({
        historyList: []
      });
    }).finally(() => {
      this.setState({
        loading: false,
      });
      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 });
    }
  }

  getTransTitle(item) {
    let title =  item.createTime;
    if (item.remarks) {
      title += ': ' + item.remarks;
    } else if (item.amountSymbol == 'M') {
      title += ': ' + (item.siteName || "Charging");
    } else {
      title += ': ' + $t('wallet.topUp');
    }
    return title;
  }

  toHistoryList() {
    startPage(PageList.history);
  }

  render() {
    return (
      <View style={this.props.shown ? ui.flex1 : styles.hide}>
        { this.state.loading
        ? <View style={styles.listView}>
          { this.state.loadingList.map((item, index) =>
            <View style={styles.itemView} key={index}>
              <VbeSkeleton
                style={styles.iconType}
                layout={[
                  {width: 32, height: 32, borderRadius: 30, marginRight: 16}
                ]}/>
              <View style={styles.itemContent}>
                <VbeSkeleton
                  style={ui.flex1}
                  layout={[
                    {width: '100%', height: 15, marginTop: 4},
                    {width: '60%', height: 15, marginTop: 4}
                  ]}/>
              </View>
            </View>
          )}
          </View>
        : <><View style={styles.listView}>
          { this.state.historyList.length > 0
          ? this.state.historyList.map((item, index) => (
              <Pressable
                key={index}
                android_ripple={ripple}
                style={styles.itemView}
                onPress={() => {
                  this.toSummary(index)
                }}>
                <Image
                  style={styles.iconType}
                  resizeMode="contain"
                  source={(item.amountSymbol == 'P' || item.remarks) ? IconPayment : IconCharge}/>
                <View style={[styles.itemContent, index > 0 && styles.divide]}>
                  <View style={ui.flex1}>
                    <TextView style={styles.issueName}>{this.getTransTitle(item)}</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>
          { (app.v3.overview && this.state.historyList.length > 0) && 
            <TouchableOpacity
              style={styles.moreButton}
              activeOpacity={0.4}
              onPress={() => this.toHistoryList()}>
              <Text
                style={ui.link}>
                {$t("wallet.viewMore")}
              </Text>
            </TouchableOpacity>
          }
        </>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  hide: {
    display: 'none'
  },
  rangeText: {
    color: '#000',
    fontSize: 14
  },
  listView: {
    marginTop: 0,
    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
  },
  moreButton: {
    padding: 16,
    alignItems: 'center',
    marginBottom: 8
  }
})