'use strict';

import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, Image, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
import HelpTipsModal from "./HelpTipsModal";
import SureModal from "./SureModal";
import WithdrawModal from "./WithdrawModal";
import ScrollableTabView from 'react-native-scrollable-tab-view';
import TabStatistics from '../components/TabStatistics';
import Statistics from "./Statistics";
import ReactNative from "react-native";


const tabTitles = ['昨日', '本月', '上月'];

export default class Data extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('BankCardBindSuccessEvent', () => {
            this.props.refreshSettlementInfo && this.props.refreshSettlementInfo();
        });
    }

    componentWillUnmount() {
        this.subscription.remove();
    }

    render() {
        let {
            isShowHelp,
            isShowSure,
            isShowWithdrawal,
            statisticsInfo
        } = this.props;
        let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
        let scrollEnabled = height < 667;

        return (
            <ScrollView style={styles.container} scrollEnabled = {scrollEnabled}>
                <HelpTipsModal
                    tips={this.props.tips}
                    isShowHelp={isShowHelp}
                    hiddenHelpDialog={this.props.hiddenHelpDialog}/>
                <SureModal
                    isShow={isShowSure}
                    hiddenSureDialog={this.props.hiddenSureDialog}
                    showWithdrawalDialog={this.props.showWithdrawalDialog}/>
                <WithdrawModal
                    isShowWithdrawal={isShowWithdrawal}
                    hiddenWithDrawDialog={this.props.hiddenWithDrawDialog}/>
                <View style={styles.headerBackground}>
                    <Text style={styles.canWithDrawText}>可提现金额</Text>
                    <View style={styles.amountView}>
                        <View style={styles.textView}>
                            <Text
                                style={styles.amountText}>{this.props.settlementInfo.settlementInfoData.settlementAmount}</Text>
                            <View style={styles.reminderView}>
                                <Image style={styles.reminderImage} source={require('../images/reminder.png')}/>
                                <Text style={styles.reminderText}>每月15日统一打款，节假日顺延</Text>
                            </View>
                        </View>
                        <View style={[styles.textView, {paddingRight: 30}]}>
                            <TouchableOpacity activeOpacity={1} onPress={() => {
                                if (!bindStatus) {
                                    this.props.showHelpDialog && this.props.showHelpDialog('请先完成银行卡绑定');
                                    return
                                }
                                if (!this.props.settlementInfo.settlementInfoData.settlementAmount || this.props.settlementInfo.settlementInfoData.settlementAmount === 0) {
                                    return
                                }
                                if (this.props.settlementInfo.settlementInfoData.canSettlement) {
                                    !this.props.addSettlement.isFetching && this.props.showSureDialog && this.props.showSureDialog();
                                } else {
                                    this.props.showHelpDialog && this.props.showHelpDialog('您有正在处理中的提现，请耐心等待完成后再做新的提现操作');
                                }
                            }}>
                                <Text style={styles.amountButton}>提现</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
                <View style={styles.lineView}/>
                <TouchableOpacity activeOpacity={1} style={styles.withdrawView} onPress={() => {
                    this.props.jumpWithUrl && this.props.jumpWithUrl('提现记录', 'withdrawalRecord');
                }}>
                    <Text style={styles.hasWithDrawText}>已提现金额</Text>
                    <View style={[styles.textView, {flexDirection: 'row', paddingRight: 15}]}>
                        <Text
                            style={styles.hasWithDrawText}>{this.props.settlementInfo.settlementInfoData.historySettlementAmount}</Text>
                        <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                <TouchableOpacity activeOpacity={1} style={styles.withdrawView} onPress={() => {
                    this.props.jumpWithUrl && this.props.jumpWithUrl('全部佣金', 'orderIncome');
                }}>
                    <Text style={styles.hasWithDrawText}>全部佣金数据</Text>
                    <View style={[styles.textView, {flexDirection: 'row', paddingRight: 15}]}>
                        <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                <ScrollableTabView
                    style={{backgroundColor: 'white'}}
                    locked={true}
                    scrollWithoutAnimation={true}
                    renderTabBar={() => <TabStatistics tabNames={tabTitles}/>}
                    onChangeTab={(obj) => {this.props.changeTab && this.props.changeTab(obj.i + 1);}}
                >
                    <Statistics statisticsInfo={statisticsInfo}/>
                    <Statistics statisticsInfo={statisticsInfo}/>
                    <Statistics statisticsInfo={statisticsInfo}/>
                </ScrollableTabView>
            </ScrollView>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#f0f0f0'
        },
        textStyle: {
            flex: 1,
            fontSize: 20,
            marginTop: 20,
            textAlign: 'center',
        },
        textView: {
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'flex-start',
        },
        reminderImage: {
            width: 11,
            height: 11,
        },
        reminderView: {
            marginTop: 2,
            flexDirection: 'row',
            alignItems: 'center',
        },
        reminderText: {
            fontFamily: 'PingFang-SC-Regular',
            color: '#B0B0B0',
            fontSize: 10,
            paddingLeft: 2
        },
        headerBackground: {
            width: width,
            height: 128,
            backgroundColor: '#FFFFFF',
            paddingTop: 28,
            paddingLeft: 15,
            paddingBottom: 25,
            position: 'relative'
        },
        canWithDrawText: {
            height: 20,
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 12,
            color: '#B0B0B0',
        },
        amountView: {
            width: width,
            height: 58,
            marginTop: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
        },
        amountText: {
            fontSize: 48,
            color: '#444444',
            fontWeight: 'bold',
        },
        amountButton: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            fontWeight: 'bold',
            backgroundColor: '#D0021B',
            color: '#FFFFFF',
            borderWidth: 1,
            borderColor: '#D0021B',
            borderRadius: 4,
            overflow: 'hidden',
            paddingTop: 5,
            paddingLeft: 18,
            paddingRight: 18,
            paddingBottom: 5,
            textAlign: 'center',
        },
        withdrawView: {
            width: width,
            height: 50,
            backgroundColor: '#FFFFFF',
            flexDirection: 'row',
            paddingLeft: 15,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        hasWithDrawText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#444444',
        },
        arrowImage: {
            width: 16,
            height: 16,
            marginLeft: 2,
        },
        lineView: {
            width: width,
            height: 0.5,
            backgroundColor: '#e0e0e0'
        },
    })
;