'use strict';

import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, Linking, Platform} from 'react-native';
import SureBankCardModal from "./SureBankCardModal";
import BankBranchModal from "./BankBranchModal";
import CityPicker from './common/CityPicker'

export default class BankCard extends Component {

    constructor(props) {
        super(props);
        this.renderUnBind = this.renderUnBind.bind(this);
        this.state = {
            isShow: false,
            isUpdate: false,
            messageTips: "",
            isBand: '',
            name: '',
            number: '',
            bankName: '',
            bankCode: '',
            cardNo: '',
            bankBranch: '',
            bankCityId: '',
            bankLocationStr: '',
            isShowLocationAlert: false,
        }
    }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('BankSelectEvent', (events) => {
            this.setState({
                bankCode: events.get('bankCode'),
                bankName: events.get('bankName'),
            });
        });
    }

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

    checkInfo(){

        let name = this.state.name;
        let re = /[^\u4e00-\u9fa5]/; //(中文2-4)
        if (!name || name.length < 2 || re.test(name)) {
            this.setState({messageTips: '您输入的姓名不符合规范，请重新输入'});
            return
        }

        let idNo = this.state.number; //(15||18||(17+x))
        let reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
        if(!idNo || reg.test(idNo) === false) {
            this.setState({messageTips: '您输入的身份证号码不符合规范，请重新输入'});
            return
        }

        if (!this.state.bankCode) {
            this.setState({messageTips: '请选择开户行'});
            return
        }

        let bankBranch = this.state.bankBranch;
        if (!bankBranch || !bankBranch.trim()) {
            this.setState({messageTips: '请输入正确的分行和支行信息'});
            return
        }

        bankBranch = bankBranch.trim();
        if (bankBranch.length < 4) {
            this.setState({messageTips: '请输入正确的分行和支行信息'});
            return
        }


        let cardNo = this.state.cardNo; //16-19
        if (!cardNo || cardNo.length < 16) {
            this.setState({messageTips: '您输入的银行卡号不符合规范，请重新输入'});
            return
        }

        let bankCityId = this.state.bankCityId

        if (!bankCityId) {
            this.setState({messageTips: '请输入开户城市'});
            return
        }

        this.setState({messageTips: '', isUpdate: true});
        this.props.checkBankCard && this.props.checkBankCard(this.state.name, this.state.number, this.state.bankCode, this.state.cardNo,bankBranch, bankCityId);
    }

    renderUnBind() {
        let checkMessage = this.state.messageTips || this.props.checkBankCardResult.message;

        if (this.state.isShow) {
            return (
                <View>
                    <Text style={[styles.tipTextText, {marginTop: 10, marginLeft: 15, marginBottom: 10}]}>请添加持卡人本人的银行卡</Text>
                    <View style={styles.inputView}>
                        <Text style={[styles.wordText, {width: 76, color: '#444444'}]}>持卡人</Text>
                        <TextInput
                            ref="nameInput"
                            style={[styles.wordText, {width: 200, color: '#444444'}]}
                            placeholder="请输入持卡人姓名"
                            placeholderTextColor='#b0b0b0'
                            underlineColorAndroid='transparent'
                            onChangeText={(name) => {this.setState({name})}}/>
                    </View>
                    <View style={styles.lineView}/>
                    <View style={styles.inputView}>
                        <Text style={[styles.wordText, {width: 76, color: '#444444'}]}>身份证号</Text>
                        <TextInput
                            ref="idInput"
                            style={[styles.wordText, {width: 200, color: '#444444'}]}
                            maxLength={18}
                            placeholder="请输入身份证号"
                            placeholderTextColor='#b0b0b0'
                            underlineColorAndroid='transparent'
                            onChangeText={(number) => {this.setState({number})}}/>
                    </View>
                    <View style={styles.lineView}/>
                    <View style={styles.inputView}>
                        <Text style={[styles.wordText, {width: 76, color: '#444444'}]}>开户行</Text>
                        <TouchableOpacity style={{flexDirection: 'row', height: 44, alignItems: 'center'}} activeOpacity={0.8}
                            onPress={() => {
                                this.props.jumpWithUrl && this.props.jumpWithUrl('开户行', 'bankList');
                        }}>
                            <Text style={[styles.wordText, {
                                width: width-124,
                                paddingLeft: Platform.OS === 'ios' ? 0 : 12,
                                color: this.state.bankName === '' ? '#b0b0b0' : '#444444'
                            }]}>{this.state.bankName === '' ? '请选择开户行' : this.state.bankName}</Text>
                            <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.lineView}/>
                    <View style={styles.inputView}>
                        <Text style={[styles.wordText, {width: 76, color: '#444444'}]}>开户城市</Text>
                        <TouchableOpacity
                            style={{flexDirection: 'row', height: 44, alignItems: 'center'}} activeOpacity={0.8}
                            onPress={() => {
                                this.setState({
                                    isShowLocationAlert: true
                                })
                            }}
                        >
                            <Text style={[styles.wordText, {
                                width: width-124,
                                paddingLeft: Platform.OS === 'ios' ? 0 : 12,
                                color: this.state.bankLocationStr === '' ? '#b0b0b0' : '#444444'
                            }]}>{this.state.bankLocationStr === '' ? '请选择开户城市' : this.state.bankLocationStr}</Text>
                            <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                        </TouchableOpacity>

                    </View>
                    <View style={styles.lineView}/>
                    <View style={styles.inputView}>
                        <Text style={[styles.wordText, {width: 76, color: '#444444'}]}>分行 支行</Text>
                        <TextInput
                            ref="subBrandNameInput"
                            style={[styles.wordText, {width: width-124, color: '#444444'}]}
                            maxLength={50}
                            placeholder="例如：南京市分行雨花支行"
                            placeholderTextColor='#b0b0b0'
                            underlineColorAndroid='transparent'
                            onChangeText={(bankBranch) => {this.setState({bankBranch})}}/>

                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                              this.props.showBankTipsAlert && this.props.showBankTipsAlert();
                        }}>
                            <Image style={styles.markImage} source={require('../images/redtip.png')}/>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.lineView}/>
                    <View style={styles.inputView}>
                        <Text style={[styles.wordText, {width: 76, color: '#444444'}]}>银行卡号</Text>
                        <TextInput
                            ref="cardInput"
                            style={[styles.wordText, {width: 200, color: '#444444'}]}
                            maxLength={19}
                            placeholder="请输入银行卡号"
                            placeholderTextColor='#b0b0b0'
                            keyboardType="numeric"
                            underlineColorAndroid='transparent'
                            onChangeText={(cardNo) => {this.setState({cardNo});}}/>
                    </View>
                    <Text style={[styles.wordText, {color: '#D0021B', marginTop: 10, marginLeft: 15, marginBottom: 10}]}>{checkMessage}</Text>
                    <TouchableOpacity style={styles.submitBtn} activeOpacity={0.8} onPress={() => {
                        this.checkInfo();
                    }}>
                        <Text style={styles.submitText}>确定</Text>
                    </TouchableOpacity>
                </View>
            );
        } else {
            return (
                <View style={{alignItems: 'center'}}>
                    <View style={styles.contentContainer}>
                        <View style={{marginTop: 45, alignItems: 'center'}}>
                            <Text style={styles.wordText}>没有绑定银行卡的用户将无法提现！</Text>
                        </View>
                        <TouchableOpacity onPress={() => {this.setState({isShow: true});}}>
                            <View style={styles.addView}>
                                <Text style={[styles.wordText, {textAlign: 'center'}]}>添加银行卡</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            );
        }
    }

    render() {
        let {
            status,
            isShowDialog,
            bankCardInfo,
            checkBankCardResult,
            isShowBankAlert,
        } = this.props;

        if (this.state.isUpdate && bankCardInfo.name){
            DeviceEventEmitter.emit('BankCardBindSuccessEvent');
        }

        return (
            <View style={styles.container}>
                <CityPicker
                    isShow={this.state.isShowLocationAlert}
                    setCityInfo={({bankCityId, bankLocationStr})=> {
                        this.setState({
                            bankCityId,
                            bankLocationStr
                        })
                    }}

                    dismissFun={() => {
                        this.setState({
                            isShowLocationAlert: false
                        })
                    }}
                />
                <BankBranchModal
                    isShow={isShowBankAlert}
                    hiddenBankTipsAlert={this.props.hiddenBankTipsAlert}/>
                <SureBankCardModal
                    isShow={isShowDialog}
                    checkBankCardResult={checkBankCardResult}
                    hiddenSureDialog={this.props.hiddenSureDialog}
                    bindBankCard={this.props.bindBankCard}/>
                {status === '2' || bankCardInfo.name ?
                    <View style={{alignItems: 'center'}}>
                        <View style={styles.contentContainer}>
                            <Text style={[styles.bankText, {marginTop: 20, marginLeft: 20}]}>{bankCardInfo.bankName}</Text>
                            <View style={styles.infoView}>
                                <Text style={[styles.bankText, {height: 29, paddingTop: 2, marginRight: 20, fontSize: 24, textAlign: 'center'}]}>****</Text>
                                <Text style={[styles.bankText, {height: 29, paddingTop: 2, marginRight: 20, fontSize: 24, textAlign: 'center'}]}>****</Text>
                                <Text style={[styles.bankText, {height: 29, paddingTop: 2, marginRight: 20, fontSize: 24, textAlign: 'center'}]}>****</Text>
                                <Text style={[styles.bankText, {fontSize: 24, textAlign: 'center'}]}>{bankCardInfo.bankCardNo}</Text>
                            </View>
                            <Text style={[styles.wordText, {marginTop: 20, marginLeft: 20}]}>持卡人：{bankCardInfo.name}</Text>
                        </View>
                        <Text style={[styles.wordText, {color: '#444444', marginTop: 5}]}>更换银行卡请致电官方客服</Text>
                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                                Linking.openURL('tel:400-889-9646')
                            }}>
                            <Text style={[styles.wordText, {color: '#D0021B', marginTop: 7, textDecorationLine: 'underline'}]}>400-889-9646</Text>
                        </TouchableOpacity>
                    </View>
                    : this.renderUnBind()
                }
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },
    contentContainer: {
        width: 295,
        height: 158,
        margin: 40,
        borderRadius: 5,
        shadowColor: 'rgba(0,0,0,0.16)',
        backgroundColor: '#363636',
    },
    lineView: {
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0'
    },
    tipTextText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#B0B0B0',
      letterSpacing: -0.19,
    },
    wordText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: 'white',
        letterSpacing: -0.19,
    },
    addView: {
        width: 108,
        height: 30,
        marginTop: 21,
        marginLeft: 94,
        borderRadius: 2,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
    },
    bankText: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 20,
        color: 'white',
        fontWeight: 'bold'
    },
    infoView: {
        width: 295,
        height: 29,
        marginTop: 20,
        paddingLeft: 20,
        paddingRight: 32,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    inputView: {
        width: width,
        height: 50,
        paddingLeft: 15,
        flexDirection: 'row',
        backgroundColor: 'white',
        alignItems: 'center',
    },
    arrowImage: {
        width: 11,
        height: 11,
        marginLeft: 2,
    },
    markImage: {
        width: 16,
        height: 16,
        marginRight: 15,
    },
    submitBtn: {
        width: width - 30,
        marginLeft: 15,
        marginRight: 15,
        height: 44,
        borderRadius: 4,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#444444',
    },
    submitText: {
        textAlign: 'center',
        color: 'white',
        fontSize: 16
    }
});