'use strict';

import React, {Component} from 'react';
import {
    Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules,
    DeviceEventEmitter
} from 'react-native';

import {Immutable} from 'immutable';
import ProductListCell from '../../common/components/ListCell/ProductListCell';
import HelpTipsModal from "./HelpTipsModal";
import SureModal from "./SureModal";
import WithdrawModal from "./WithdrawModal";
import GuideModal from "./GuideModal";
import BannerSwiper from './BannerSwiper';
import { TipsAlertItem, TipsAlert } from '../../common/components/YH_TipsAlert';

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

        this._renderRow = this._renderRow.bind(this);
        this._renderHeader = this._renderHeader.bind(this);
        this._jumpBindCardUrl = this._jumpBindCardUrl.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

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

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

    _renderHeader() {
        let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
        let bindStyle = bindStatus ? {color: '#444444'} : {color: '#D0021B'};
        let isBind = bindStatus ? '已绑定' : '未绑定';
        let bindType = bindStatus ? '2' : '1'; // 2绑定，1未绑定
        return (
            <View>
                <View style={styles.headerBackground}>
                    <View style={styles.header}/>
                    <View style={styles.helpView}>
                        <Text style={styles.canWithDrawText}>可提现金额</Text>
                        <TouchableOpacity activeOpacity={1} onPress={() => {
                            this.props.showHelpDialog && this.props.showHelpDialog('仅计算当天12点前产生的有效订单结算后的可提现金额，具体说明请参见规则说明');
                        }}>
                            <Image style={styles.helpImage} source={require('../images/help.png')}/>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.amountView}>
                        <View style={styles.textView}>
                            <Text
                                style={styles.amountText}>{this.props.settlementInfo.settlementInfoData.settlementAmount}</Text>
                        </View>
                        <View style={[styles.textView, {paddingRight: 30}]}>
                            <TouchableOpacity activeOpacity={1} onPress={() => {
                                if(!bindStatus){
                                    this.props.showTipsAlertDialog && this.props.showTipsAlertDialog('请先完成银行卡绑定');
                                    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>
                <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={styles.lineView}/>
                <TouchableOpacity activeOpacity={1} style={styles.withdrawView} onPress={() => {
                    this.props.jumpWithUrl && this.props.jumpWithUrl('我的银行卡', 'bankCard', bindType);
                }}>
                    <Text style={styles.hasWithDrawText}>我的银行卡</Text>
                    <View style={[styles.textView, {flexDirection: 'row', paddingRight: 15}]}>
                        <Text style={[styles.hasWithDrawText,bindStyle]}>{isBind}</Text>
                        <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
            </View>
        )
    }

    _renderRow(rowData, sectionID, rowID) {
        let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
        let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft};
        let hasOrder = this.props.recentlyOrder.recentlyOrder_list.toArray().length > 0;
        switch (sectionID) {
            case 'resourceList': {
                return(
                    <View>
                        <BannerSwiper resource={rowData} row_ID={rowID} resourceJumpWithUrl={this.props.resourceJumpWithUrl}/>
                        <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                    </View>
                );
            }
            case 'orderListHeader': {
                return (
                    <View>
                        <View style={styles.orderView}>
                            <Text style={[styles.hasWithDrawText, {fontWeight: 'bold'}]}>最近订单</Text>
                            <Text style={styles.orderTipsText}>当天订单第2天显示</Text>
                        </View>
                        <View style={styles.titleBottomLine}/>
                        {this.props.recentlyOrder.recentlyOrder_list.toArray().length > 0 ? null :
                            <View style={styles.emptyOrderView}>
                                <Text style={[styles.hasWithDrawText, {color: '#B0B0B0', justifyContent: 'center'}]}>您暂时没有订单</Text>
                            </View>
                        }
                    </View>
                )
            }
            case 'orderList': {
                let status = rowData.get('status') === '10' ? '待结算' : '';
                return (
                    <View>
                        <TouchableOpacity activeOpacity={1} onPress={() => {
                            this.props.jumpWithUrl && this.props.jumpWithUrl('订单详情', 'orderDetail', rowData.get('orderCode'));
                        }}>
                            <View style={styles.rowView}>
                                <View style={{height: 70, paddingTop: 12, paddingBottom: 12}}>
                                    <Text style={styles.numberText}>订单金额：{rowData.get('lastOrderAmountStr')}</Text>
                                    <View style={{flexDirection: 'row', marginTop: 6}}>
                                        <Text style={styles.timeText}>{rowData.get('orderTimeStr')}</Text>
                                        {rowData.get('isNew') === 1 ?
                                            <View style={styles.statusTextContainer}>
                                                <Text style={styles.statusText}>新客订单</Text>
                                            </View>: null}
                                    </View>
                                </View>
                                <View>
                                    <Text style={styles.priceText}>{rowData.get('amountStr')}</Text>
                                    <Text style={[styles.timeText, {fontSize:12, textAlign:'right'}]}>{status}</Text>
                                </View>
                            </View>
                            <View style={styles.lineView}/>
                        </TouchableOpacity>
                    </View>
                );
            }
            case 'orderListFooter': {
                return (
                    <View>
                        {!hasOrder ? null :
                            <TouchableOpacity activeOpacity={1} style={[styles.withdrawView, {justifyContent: 'center'}]} onPress={() => {
                                this.props.jumpWithUrl && this.props.jumpWithUrl('全部收入', 'orderIncome');
                            }}>
                                <Text style={styles.hasWithDrawText}>查看全部</Text>
                            </TouchableOpacity>
                        }
                    </View>
                )
            }
            case 'productListTitle': {
                return (
                    <View>
                        <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                        <View style={styles.withdrawView}>
                            <Text style={[styles.hasWithDrawText, {fontWeight: 'bold'}]}>推荐商品</Text>
                        </View>
                        <View style={styles.titleBottomLine}/>
                    </View>
                )
            }
            case 'productList': {
                return (
                    <ProductListCell
                        style={[styles.listContainer, customStyle]}
                        key={'row' + rowID}
                        rowID={rowID}
                        data={rowData}
                        onPressProduct={this.props.onPressProduct}
                    />
                );
            }
            default:
                return null;
        }
    }

    _jumpBindCardUrl() {
        let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
        let bindType = bindStatus ? '2' : '1';
        this.props.jumpWithUrl && this.props.jumpWithUrl('我的银行卡', 'bankCard', bindType);
        this.props.hiddenTipsAlertDialog && this.props.hiddenTipsAlertDialog();
    }

    render() {
        let {
            isShowTipsAlert,
            isShowHelp,
            isShowSure,
            isShowWithdrawal,
            resourceInfo,
            recentlyOrder,
            topList,
        } = this.props;

        let dataSource = {
            resourceList: resourceInfo.resourceList ? resourceInfo.resourceList.toArray() : [],
            orderListHeader: ['最近订单'],
            orderList: recentlyOrder.recentlyOrder_list ? recentlyOrder.recentlyOrder_list.toArray() : [],
            orderListFooter: ['查看全部'],
            productListTitle: ['推荐商品'],
            productList: topList.product_list ? topList.product_list.toArray() : [],
        };
        let productList = topList.product_list ? topList.product_list.toArray() : [];
        return (
            <View style={styles.container}>
                <TipsAlert 
                    tips={this.props.tips}
                    isShow={isShowTipsAlert}
                    >
                    <TipsAlertItem showStatus='sure' handleAction={this._jumpBindCardUrl}>去绑定</TipsAlertItem>
                    <TipsAlertItem showStatus='cancel' handleAction={this.props.hiddenTipsAlertDialog}>取消</TipsAlertItem>
                </TipsAlert>
                <GuideModal
                    isShowGuide={this.props.isShowGuide}
                    hiddenGuideDialog={this.props.hiddenGuideDialog}/>
                <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}/>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    yh_viewVisible={true}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    renderHeader={this._renderHeader}
                    onEndReached={() => {
                        if (productList.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                />
            </View>
        );
    }

}


let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;

let styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        textView: {
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
        },
        header: {
            backgroundColor: '#444444',
            width,
            height: 500,
            flex: 1,
            position: 'absolute',
            top: -500,
            left: 0,
        },
        headerBackground: {
            width: width,
            height: 128,
            backgroundColor: '#444444',
            paddingTop: 20,
            paddingLeft: 15,
            paddingBottom: 20,
            position: 'relative'
        },
        helpView: {
            width: width,
            height: 20,
            flexDirection: 'row',
            alignItems: 'center'
        },
        canWithDrawText: {
            height: 20,
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#FFFFFF',
        },
        helpImage: {
            width: 14,
            height: 14,
            marginLeft: 4
        },
        amountView: {
            width: width,
            height: 58,
            marginTop: 10,
            flexDirection: 'row',
            justifyContent: 'space-between'
        },
        amountText: {
            fontSize: 48,
            color: '#FFFFFF',
        },
        amountButton: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 12,
            color: '#FFFFFF',
            borderWidth: 1,
            borderColor: '#E0E0E0',
            borderRadius: 2,
            paddingTop: 3,
            paddingLeft: 10,
            paddingRight: 10,
            paddingBottom: 3,
            textAlign: 'center',
        },
        withdrawView: {
            width: width,
            height: 44,
            backgroundColor: '#FFFFFF',
            flexDirection: 'row',
            paddingLeft: 15,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        orderView: {
            width: width,
            height: 44,
            backgroundColor: '#FFFFFF',
            flexDirection: 'row',
            paddingLeft: 15,
            alignItems: 'center',
        },
        hasWithDrawText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#444444',
        },
        orderTipsText: {
            marginLeft: 4,
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 12,
            color: '#B0B0B0',
            letterSpacing: -0.16,
        },
        arrowImage: {
            width: 16,
            height: 16,
            marginLeft: 2,
        },
        emptyOrderView: {
            width: width,
            height: 200,
            backgroundColor: '#FFFFFF',
            alignItems: 'center',
            justifyContent: 'center'
        },
        titleBottomLine: {
            width: width,
            height: 0.5,
            backgroundColor: '#e0e0e0'
        },
        contentContainer: {
            flexDirection: 'row',
            flexWrap: 'wrap',
            backgroundColor: 'white'
        },
        listContainer: {
            width: width / 2,
        },
        rowView: {
            width: width,
            height: 70,
            flexDirection: 'row',
            paddingLeft: 15,
            paddingRight: 15,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        lineView: {
            width: width,
            height: 0.5,
            backgroundColor: '#e0e0e0'
        },
        numberText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#444444',
            letterSpacing: -0.19,
        },
        priceText: {
            fontFamily: 'PingFang-SC-Medium',
            fontSize: 16,
            color: '#444444',
            letterSpacing: -0.21,
            fontWeight: 'bold',
            textAlign: 'right'
        },
        timeText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#B0B0B0',
            letterSpacing: -0.19,
        },
        statusTextContainer: {
            width: 48,
            height: 18,
            marginLeft: 10,
            borderWidth: 1,
            borderColor: '#D0021B',
            borderRadius: 2,
            alignItems: 'center',
            justifyContent: 'center',
        },
        statusText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 10,
            color: '#D0021B',
            letterSpacing: -0.24,
            textAlign: 'center',
        },
    })
;