/**
 * sub app userLogout
 * @author: lixia.zhang
 * @date: 2018/04/13
 */

'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    StyleSheet,
    Dimensions,
    Text,
    TouchableOpacity,
    TextInput,
    Modal,
    Image,
    ImageBackground
} from 'react-native';

import YH_Image from '../../../common/components/YH_Image';
import Prompt from '../../../common/components/Prompt';

export default class UserLogoutReason extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text: '',
            mobile:'',
            cancleCode:'',
            image0Degree: 0,
            image1Degree: 0,
            image2Degree: 0,
            image3Degree: 0,
            countDown: 59,
            tickTimeOut: false,
            resendBtnText: '获取验证码',
            readedClause: false,
            invalidMobileTip: false
        }
    }

    _startTimer() {
        this.timer = setInterval(function () {
            let count = this.state.countDown - 1;
            if (count < 0) {
                count = 60;
                this.setState({
                    countDown: count,
                    tickTimeOut: true,
                    resendBtnText: '获取验证码',
                });
            }
            if (!this.state.tickTimeOut) {
                this.setState({
                    countDown: count,
                    resendBtnText: '重新获取 '+count,
                });
            }
        }.bind(this), 1000);

    }

    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

    _sendConfirmPaySnsCode() {
        if (this.state.resendBtnText != '获取验证码') {
            return;
        }else {
            var degrees = this.state.image0Degree + ',' + this.state.image1Degree + ',' + this.state.image2Degree + ',' + this.state.image3Degree;
            this.props.fetchCanleCode && this.props.fetchCanleCode(this.state.mobile, degrees)
        }
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.succeedSendCode != this.props.succeedSendCode) {
            try {
                if (nextProps.succeedSendCode) {
                    if (this.state.resendBtnText !== '获取验证码') {
                        return;
                    }else {
                        this.setState({
                            countDown: 60,
                            tickTimeOut: false,
                            resendBtnText: '重新获取 59',
                        });
                        this._startTimer();
                    }
                }
            } catch (e) {

            } finally {

            }
        }
    }


    render() {
        let {imageCheckCodeUrl}=this.props;
        return (
            <View style={styles.container}>
            <TouchableOpacity
                activeOpacity={1.0}
                onPress={() => {
                    this.refs.logoutReasonTextInput.blur();
                }}>
                <View style={styles.textContainer}>
                    <View style={{alignItems: 'center'}}>
                        <Text style={[styles.text,styles.textTitle]}>注销说明</Text>
                    </View>
                    <Text style={styles.text}>1.账号信息、会员权益将被清除，且无法恢复。</Text>
                    <Text style={styles.text}>2.账号内有货币、优惠券、礼品卡等将被清除且无法恢复。</Text>
                    <Text style={styles.text}>3.交易记录将被清除。</Text>
                    <Text style={styles.text}>4.无法使用该账户登录授权或绑定关系的app和网站。</Text>
                </View>
                <View style={styles.textInputContainer}>
                    <TextInput
                        ref="logoutReasonTextInput"
                        style={[styles.inputText,{height: height > 568 ? 150: 100}]}
                        multiline={true}
                        placeholder="请填写注销原因（必填）"
                        placeholderTextColor='#b0b0b0'
                        underlineColorAndroid='transparent' //设置下划线背景色透明 达到去掉下划线的效果
                        onChangeText={(text) => {
                            this.setState({text});
                            this.props.enableSubmitBtn && this.props.enableSubmitBtn(text == "" ? false : true)
                        }}/>
                </View>

                <View style={styles.clauseContainer}>
                    <TouchableOpacity
                        activeOpacity={1.0}
                        style={{flexDirection: 'row',alignItems: 'center',paddingTop:5, paddingBottom:5,paddingLeft:5}}
                        onPress={() => {
                            this.setState(previousState => {
                                return { readedClause: !previousState.readedClause };
                            });
                        }}>
                        <Image
                            style={styles.check}
                            source={this.state.readedClause == false ? require('../../images/weixuan.png'): require('../../images/xuanze.png')}
                        />
                        <Text style={{color:'#444444',fontSize:12}}>我已阅读并同意以下协议</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={{paddingTop:5, paddingBottom:5}}
                        activeOpacity={1.0}
                        onPress={() => {
                            this.props.onPressLogoutClause && this.props.onPressLogoutClause();
                        }}>
                        <Text style={{color:'#4a90e2',fontSize:12}}>《有货注销条款》</Text>
                    </TouchableOpacity>
                </View>
                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={() => {
                        if(this.props.submitBtnEnable && this.state.readedClause){
                            this.props.showLogoutReasonModalAction && this.props.showLogoutReasonModalAction(true)
                            this.setState({
                                countDown: 60,
                                tickTimeOut: true,
                                resendBtnText: '获取验证码',
                            });
                        }
                    }}>
                    <View style={[styles.submitBtn,{backgroundColor:this.props.submitBtnEnable && this.state.readedClause?'#444444':'#b0b0b0'}]}>
                        <Text style={styles.submitText}>注销帐号</Text>
                    </View>
                </TouchableOpacity>

                <Modal
                    animationType={"fade"}
                    transparent={true}
                    visible={this.props.showTipModal}>
                    {!this.props.hasValidMobile?
                        <View style={styles.modalContainer}>
                            <View style={styles.modalView}>
                                <View style={styles.confirmTitleContainer}>
                                    <View style={{marginTop:40,marginBottom:29}}>
                                        <Text style={styles.confirmTitle}>您的账户手机号异常，暂时无法注销，</Text>
                                        <TouchableOpacity
                                            style={{flexDirection:'row', alignItems:'center', justifyContent: 'center'}}
                                            activeOpacity={1.0}
                                            onPress={() => {
                                                this.props.hiddenTipModalstate && this.props.hiddenTipModalstate();
                                                this.props.gotoOnlineService && this.props.gotoOnlineService();
                                            }}>
                                            <Text style={styles.confirmTitle}>请联系</Text>
                                            <Text style={[styles.confirmTitle,{color:'#4a90e2'}]}>在线客服</Text>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                                <View style={{width:'100%',height:0.5,backgroundColor:'#e0e0e0'}}/>
                                <TouchableOpacity
                                    style={{width:'49%',alignItems:'center',justifyContent:'center',height:45.5}}
                                    onPress={() => {
                                        this.props.hiddenTipModalstate && this.props.hiddenTipModalstate();
                                        this.props.naviBackAction && this.props.naviBackAction();
                                    }}>
                                    <Text style={{fontSize:17,color:'#d0021b',letterSpacing:-0.41,fontWeight:'500'}}>返回</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        :
                        <View style={styles.modalContainer}>
                            <View style={styles.modalView}>
                                <View style={styles.confirmTitleContainer}>
                                    <View style={{marginTop:40,marginBottom:29}}>
                                        <Text style={styles.confirmTitle}>确认注销账号吗？</Text>
                                        <Text style={styles.confirmTitle}>注销账号将无法恢复！</Text>
                                    </View>
                                </View>
                                <View style={{width:'100%',height:0.5,backgroundColor:'#e0e0e0'}}/>
                                <View style={styles.confirmBtnContainer}>
                                    <TouchableOpacity
                                        style={{width:'49%',alignItems:'center',justifyContent:'center',height:45.5}}
                                        onPress={() => {
                                            this.props.hiddenTipModalstate && this.props.hiddenTipModalstate();
                                            this.props.naviBackAction && this.props.naviBackAction();
                                        }}>
                                        <Text style={{fontSize:17,color:'#d0021b',letterSpacing:-0.41,fontWeight:'500'}}>暂不</Text>
                                    </TouchableOpacity>
                                    <View style={{width:0.5,height:45,backgroundColor:'#e0e0e0'}}/>
                                    <TouchableOpacity
                                        style={{width:'49%',alignItems:'center',justifyContent:'center',height:45.5}}
                                        onPress={() => {
                                            this.props.hiddenTipModalstate && this.props.hiddenTipModalstate();
                                        }}>
                                        <Text style={{fontSize:17,color:'#444444',letterSpacing:-0.41}}>确定</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    }
                </Modal>

                <Modal
                    animationType={"fade"}
                    transparent={true}
                    visible={this.props.showModalFlag}
                >
                    <View style={styles.modalContainer}>
                        <TouchableOpacity
                            activeOpacity={1.0}
                            style={{width:width,height:height, flex: 1, justifyContent: 'center',alignItems: 'center'}}
                            onPress={() => {
                                this.refs.codeInput.blur();
                            }}>
                            <View style={styles.modalView}>
                                <View style={{marginTop:15,marginBottom:10}}>
                                    <Text style={styles.modalTitle}>请输入短信验证码</Text>
                                </View>
                                <Text style={styles.tipText}>为了保障您的账户安全，</Text>
                                <Text style={styles.tipText}>请进行安全验证。</Text>
                                <Text style={styles.tipText}>{this.props.codeSendMessage}</Text>

                                <View style={[styles.modalTextInputContainer,{flexDirection:'row', marginTop: 20,justifyContent:'space-between'}]}>
                                    <TextInput
                                        ref="codeInput"
                                        style={[styles.modalTextInput,{width:151}]}
                                        placeholder="请输入手机验证码"
                                        placeholderTextColor='#b0b0b0'
                                        keyboardType="numeric"
                                        maxLength={11}
                                        underlineColorAndroid='transparent' //设置下划线背景色透明 达到去掉下划线的效果
                                        onChangeText={(cancleCode) => {
                                            this.setState({cancleCode});
                                        }}/>
                                    <TouchableOpacity
                                        style={{width:70,height:26,marginTop:4,justifyContent:'center',backgroundColor:this.state.resendBtnText!=='获取验证码'?'#b0b0b0':'#444444',borderRadius:35,alignItems:'center',marginRight: 5}}
                                        onPress={() => {
                                            this._sendConfirmPaySnsCode()
                                        }}>
                                        <Text style={{textAlign:'right',fontSize:11,color:'#ffffff',letterSpacing:-0.34}}>{this.state.resendBtnText}</Text>
                                    </TouchableOpacity>
                                </View>
                                {this.props.imageCheckSwitchState ?
                                    <View style={{flexDirection:'row',alignItems:'center', justifyContent:'space-between',width:240,paddingTop:2}}>
                                        <Text style={{fontSize:12,color:'#b0b0b0',textAlign:'left'}}>请将下列图片点击翻转至正确方向</Text>
                                        <TouchableOpacity
                                            style={{width:40,height:42,justifyContent:'center'}}
                                            onPress={() => {
                                                var image0Degree = 0;
                                                var image1Degree = 0;
                                                var image2Degree = 0;
                                                var image3Degree = 0;
                                                this.setState({image0Degree,image1Degree,image2Degree,image3Degree})
                                                this.props.changeImageCode && this.props.changeImageCode();
                                            }}>
                                            <Text style={{textAlign:'right',fontSize:12,color:'#d0021b',letterSpacing:-0.34,}}>换一批</Text>
                                        </TouchableOpacity>
                                    </View>
                                    :null
                                }
                                {this.props.imageCheckSwitchState || true?
                                    <View style={styles.graphicsContentView}>
                                        <ImageBackground style={styles.imageContainer} source={require('../../images/Mask.png')}>
                                            <TouchableOpacity
                                                style={styles.itemView}
                                                onPress={() => {
                                                    let image0Degree = (this.state.image0Degree + 1) % 4;
                                                    this.setState({image0Degree})
                                                }}>
                                                <YH_Image
                                                    style={[styles.image, {marginTop: this.state.image0Degree*(-52)}]}
                                                    url={imageCheckCodeUrl}
                                                ></YH_Image>
                                            </TouchableOpacity>
                                        </ImageBackground>
                                        <ImageBackground style={styles.imageContainer} source={require('../../images/Mask.png')}>
                                            <TouchableOpacity
                                                style={styles.itemView}
                                                onPress={() => {
                                                    let image1Degree = (this.state.image1Degree + 1) % 4;
                                                    this.setState({image1Degree})
                                                }}>
                                                <YH_Image
                                                    style={[styles.image, {marginTop: this.state.image1Degree*(-52), marginLeft:-52}]}
                                                    url={imageCheckCodeUrl}
                                                ></YH_Image>
                                            </TouchableOpacity>
                                        </ImageBackground>

                                        <ImageBackground style={styles.imageContainer} source={require('../../images/Mask.png')}>
                                            <TouchableOpacity
                                                style={styles.itemView}
                                                onPress={() => {
                                                    let image2Degree = (this.state.image2Degree + 1) % 4;
                                                    this.setState({image2Degree})
                                                }}>
                                                <YH_Image
                                                    style={[styles.image, {marginTop: this.state.image2Degree*(-52), marginLeft:-104}]}
                                                    url={imageCheckCodeUrl}
                                                ></YH_Image>
                                            </TouchableOpacity>
                                        </ImageBackground>
                                        <ImageBackground style={styles.imageContainer} source={require('../../images/Mask.png')}>
                                            <TouchableOpacity
                                                style={styles.itemView}
                                                onPress={() => {
                                                    let image3Degree = (this.state.image3Degree + 1) % 4;
                                                    this.setState({image3Degree})
                                                }}>
                                                <YH_Image
                                                    style={[styles.image, {marginTop: this.state.image3Degree*(-52), marginLeft:-156}]}
                                                    url={imageCheckCodeUrl}
                                                ></YH_Image>
                                            </TouchableOpacity>
                                        </ImageBackground>
                                    </View>
                                    :null
                                }
                                <View style={{width:'100%',height:0.5,backgroundColor:'#e0e0e0',marginTop:15}}/>

                                <View style={styles.confirmBtnContainer}>
                                    <TouchableOpacity
                                        style={{width:'49%',alignItems:'center',justifyContent:'center',height:45.5}}
                                        onPress={() => {
                                            this.props.showLogoutReasonModalAction && this.props.showLogoutReasonModalAction(false)
                                        }}>
                                        <Text style={{fontSize:17,color:'#d0021b',letterSpacing:-0.41,fontWeight:'500'}}>取消</Text>
                                    </TouchableOpacity>
                                    <View style={{width:0.5,height:45,backgroundColor:'#e0e0e0'}}/>
                                    <TouchableOpacity
                                        style={{width:'49%',alignItems:'center',justifyContent:'center',height:45.5}}
                                        onPress={() => {
                                            if(this.state.cancleCode !='') {
                                                this.props.confirmLogout && this.props.confirmLogout(this.state.cancleCode, this.state.text);
                                            }
                                        }}>
                                        <Text style={{fontSize:17,color:this.state.cancleCode !=''?'#444444':'#B0B0B0',letterSpacing:-0.41}}>确定</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </TouchableOpacity>
                    </View>
                    {this.props.tipMessage != '' ? <Prompt
                        text={this.props.tipMessage}
                        duration={1000}
                        onPromptHidden={this.props.onPromptHidden}
                    /> : null}
                </Modal>
            </TouchableOpacity>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0'
    },
    inputText: {
        height: 150,
        backgroundColor: 'white',
        fontSize: 15,
        letterSpacing: -0.36,
        padding: 10,
        color: '#444444',
        borderColor: '#e0e0e0',
        textAlignVertical: 'top'
    },
    textInputContainer: {
        borderRadius: 10,
        marginTop: 11,
    },
    submitBtn: {
        marginLeft: 15,
        marginRight: 15,
        marginTop: 5,
        height: 44,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    submitText: {
        textAlign: 'center',
        color: 'white',
        fontSize: 16
    },
    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor:'rgba(0, 0, 0, 0.4)',
        marginTop: -80,
        alignItems: 'center'
    },
    modalView: {
        borderRadius: 10,
        alignItems: 'center',
        backgroundColor:'#ffffff',
        width: 270
    },
    modalTitle: {
        fontSize: 17,
        color: '#444444',
        lineHeight: 23,
        letterSpacing: -0.1,
        fontFamily: 'PingFang-SC-Medium'
    },
    modalTextInputContainer: {
        width: 240,
        height: 35,
        borderBottomWidth: 0.5,
        borderColor: '#e0e0e0',
    },
    modalTextInput: {
        fontSize: 13,
        width: 240,
        height: 35,
        marginLeft:3,
    },
    graphicsContentView: {
        width: 240,
        height: 56,
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    imageContainer: {
        width: 56,
        height: 56,
        alignItems: 'center',
    },
    itemView: {
        width: 52,
        height: 52,
        marginTop: 2,
        overflow: 'hidden'
    },
    image: {
        width: 208,
        height: 208
    },
    tipText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 12,
        color: '#B0B0B0',
        letterSpacing: -0.07,
        textAlign: 'center',
    },
    confirmBtnContainer: {
        width: '100%',
        height: 45.5,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    confirmTitleContainer: {
        height:118,
            alignItems:'center'
    },
    confirmTitle: {
        color: '#444444',
            fontSize: 14,
            lineHeight: 24.5,
            textAlign: 'center',
            letterSpacing: -0.09,
    },
    clauseContainer: {
        flexDirection: 'row',
        marginTop: 25,
        justifyContent:'flex-start',
        marginLeft: 10,
        alignItems:'center'
    },
    check: {
        width: 14,
        height: 14,
        marginRight: 5.5,
    },logoutText: {
        fontSize: 17,
        color: '#444444'
    },
    textContainer:{
        backgroundColor: 'white',
        paddingBottom: 10,
    },
    textTitle: {
        fontWeight: 'bold',
        fontSize: 17,
        marginBottom: 20,
        marginTop: 29
    },
    text: {
        fontSize: 15,
        color: '#444444',
        marginBottom: 15,
        marginLeft: 15,
        marginRight: 15,
    }

    });