/**
 * 钱包页面
 * @邠心vbe on 2021/05/07
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, RefreshControl } from 'react-native';
import Payment, { toTopupPage } from './Payment';
import { PageList } from '../Router';
import History from './History';
import Overview from './Overview';
import { MyRefreshProps } from '../../components/MyRefreshControl';
import Button from '../../components/Button';

export default class Wallet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      balance: 0,
      tabIndex: 0,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      this.onRefresh();
      getUserInfo(info => {
        this.setState({
          balance: info.credit
        })
      }, true)
    });
  }

  changeTab(index) {
    if (this.state.tabIndex !== index) {
      this.setState({
        tabIndex: index
      });
    }
  }

  onRefresh() {
    this.setState({
      refreshing: true
    });
  }

  stopRefresh() {
    this.setState({
      refreshing: false
    });
  }

  render() {
    return (
      <ScrollView
        style={styles.container}
        refreshControl={
          <RefreshControl
            {...MyRefreshProps}
            refreshing={this.state.refreshing}
            onRefresh={() => this.onRefresh()}
          />
        }>
        <View style={styles.balanceView}>
          <Payment 
            balance={this.state.balance}
            isPayPerUse={false}
            isWallet={true}
            payType={"Credit Wallet"}
            topup={() => toTopupPage()}/>
        </View>
        <View style={styles.tabView}>
          <Button
            style={[
              styles.tab,
              styles.left,
              this.state.tabIndex == 0 && styles.active
            ]}
            viewStyle={{}}
            borderRadius={0}
            onClick={() => this.changeTab(0)}>
            <Text
              style={[
              styles.tabText,
              this.state.tabIndex == 0 && styles.active
            ]}>Overview</Text>
          </Button>
          <Button
            style={[
              styles.tab,
              styles.right,
            ]}
            viewStyle={{}}
            borderRadius={0}
            onClick={() => this.changeTab(1)}>
            <Text
              style={[
              styles.tabText,
              styles.rightText,
              this.state.tabIndex == 1 && styles.active
            ]}>History</Text>
          </Button>
        </View>
        <View>
          <Overview
            refresh={this.state.refreshing}
            refreshed={() => this.stopRefresh()}
            shown={this.state.tabIndex == 0}/>
          <History
            refresh={this.state.refreshing}
            refreshed={() => this.stopRefresh()}
            shown={this.state.tabIndex == 1}/>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5'
  },
  balanceView: {
    paddingTop: 12,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 12,
    backgroundColor: '#fff'
  },
  tabView: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  tabText: {
    color: '#333',
    fontSize: 14,
    paddingTop: 5,
    paddingLeft: 36,
    paddingRight: 36,
    paddingBottom: 5,
  },
  tab: {
    borderWidth: 1,
    borderColor: '#333',
    overflow: 'hidden',
    backgroundColor: '#fff'
  },
  left: {
    borderTopLeftRadius: 6,
    borderBottomLeftRadius: 6
  },
  right: {
    borderTopRightRadius: 6,
    borderBottomRightRadius: 6
  },
  rightText: {
    paddingLeft: 40,
    paddingRight: 40,
  },
  active: {
    color: colorAccent,
    backgroundColor: '#333'
  }
})