/**
 * 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
} from 'react-native';

import YH_Image from '../common/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: '获取',
        }
    }

    _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+'s',
                });
            }
        }.bind(this), 1000);

    }

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

    _sendConfirmPaySnsCode() {
        if (this.state.mobile == '') {
            this.props.mobileEmptyTip();
            return;
        }
        if (this.state.resendBtnText !== '获取') {
            return;
        }else {
            this.setState({
                countDown: 60,
                tickTimeOut: false,
                resendBtnText: '59s',
            });
            this._startTimer();
            var degrees = this.state.image0Degree + ',' + this.state.image1Degree + ',' + this.state.image2Degree + ',' + this.state.image3Degree;
            this.props.fetchCanleCode && this.props.fetchCanleCode(this.state.mobile, degrees)
        }
    }

    render() {
        let {imageCheckCodeUrl}=this.props;
        return (
            <View style={styles.container}>
                <Text style={styles.tip}>
                    请填写注销原因
                </Text>
                <View style={styles.textInputContainer}>
                    <TextInput
                        style={styles.inputText}
                        multiline={true}
                        placeholder="原因..."
                        placeholderTextColor='#b0b0b0'
                        underlineColorAndroid='transparent' //设置下划线背景色透明 达到去掉下划线的效果
                        onChangeText={(text) => {
                            this.setState({text});
                            this.props.enableSubmitBtn && this.props.enableSubmitBtn(text == "" ? false : true)
                        }}/>
                </View>
                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={() => {
                        this.props.showLogoutReasonModalAction && this.props.showLogoutReasonModalAction(true)
                    }}>
                    <View style={[styles.submitBtn,{backgroundColor:this.props.submitBtnEnable?'#444444':'#b0b0b0'}]}>
                        <Text style={styles.submitText}>提交</Text>
                    </View>
                </TouchableOpacity>

                <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'}}
                            onPress={() => {
                                this.props.showLogoutReasonModalAction && this.props.showLogoutReasonModalAction(false)
                            }}>
                            <View style={styles.modalView}>
                                <View style={{marginTop:15,marginBottom:15}}>
                                    <Text style={styles.modalTitle}>请输入短信验证码</Text>
                                </View>
                                <View style={styles.modalTextInputContainer}>
                                    <TextInput
                                        style={styles.modalTextInput}
                                        placeholder="请输入手机号"
                                        placeholderTextColor='#b0b0b0'
                                        keyboardType="numeric"
                                        maxLength={13}
                                        underlineColorAndroid='transparent' //设置下划线背景色透明 达到去掉下划线的效果
                                        onChangeText={(mobile) => {
                                            this.setState({mobile});
                                        }}/>
                                </View>
                                <View style={[styles.modalTextInputContainer,{flexDirection:'row', marginTop: 15}]}>
                                    <TextInput
                                        style={[styles.modalTextInput,{width:151}]}
                                        placeholder="请输入手机验证码"
                                        placeholderTextColor='#b0b0b0'
                                        keyboardType="numeric"
                                        maxLength={11}
                                        underlineColorAndroid='transparent' //设置下划线背景色透明 达到去掉下划线的效果
                                        onChangeText={(cancleCode) => {
                                            this.setState({cancleCode});
                                        }}/>
                                    <TouchableOpacity
                                        style={{width:70,height:35,marginRight:5}}
                                        onPress={() => {
                                            this._sendConfirmPaySnsCode()
                                        }}>
                                        <Text style={{lineHeight:30,textAlign:'right',fontSize:14,color:'#444444',letterSpacing:-0.34}}>{this.state.resendBtnText}</Text>
                                    </TouchableOpacity>
                                </View>
                                {this.props.imageCheckSwitchState ?
                                    <View style={{flexDirection:'row',alignItems:'center', justifyContent:'space-between',marginTop:2,width:240}}>
                                        <Text style={{fontSize:12,color:'#b0b0b0',lineHeight:42,textAlign:'left'}}>请将下列图片点击翻转至正确方向</Text>
                                        <TouchableOpacity
                                            style={{width:40,height:42}}
                                            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,lineHeight:42}}>换一批</Text>
                                        </TouchableOpacity>
                                    </View>
                                    :null
                                }
                                {this.props.imageCheckSwitchState ?
                                    <View style={styles.graphicsContentView}>
                                        <View style={styles.imageContainer}>
                                            <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>
                                        </View>
                                        <View style={styles.imageContainer}>
                                            <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>
                                        </View>
                                        <View style={styles.imageContainer}>
                                            <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>
                                        </View>
                                        <View style={styles.imageContainer}>
                                            <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>
                                        </View>
                                    </View>
                                    :null
                                }
                                <View style={{width:'100%',height:0.5,backgroundColor:'#e0e0e0',marginTop:15}}/>

                                <TouchableOpacity
                                    style={{width:'49%',alignItems:'center',justifyContent: 'center',height:45.5}}
                                    onPress={() => {
                                        this.props.confirmLogout && this.props.confirmLogout(this.state.cancleCode, this.state.text);
                                    }}>
                                    <View style={{width:240}}>
                                        <Text style={{fontSize:17,color:'#d0021b',letterSpacing:-0.41,fontFamily:'PingFang-SC-Medium',backgroundColor:'transparent',textAlign:'center'}}>确定</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </TouchableOpacity>
                    </View>
                    {this.props.tipMeaasge != '' ? <Prompt
                        text={this.props.tipMeaasge}
                        duration={1000}
                        onPromptHidden={this.props.onPromptHidden}
                    /> : null}
                </Modal>

            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0'
    },
    tip: {
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 7.5,
        fontSize: 14,
        color: '#444444',
        letterSpacing: -0.34,
    },
    inputText: {
        height: 150,
        backgroundColor: 'white',
        fontSize: 15,
        letterSpacing: -0.36,
        padding: 10,
        color: '#444444',
        borderWidth: 0.5,
        borderColor: '#e0e0e0',
        textAlignVertical: 'top'
    },
    textInputContainer: {
        marginLeft: 15,
        marginRight: 15,
        borderRadius: 10,
    },
    submitBtn: {
        marginLeft: 15,
        marginRight: 15,
        marginTop: 30,
        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,
    },
    modalView: {
        borderRadius: 10,
        alignItems: 'center',
        backgroundColor:'#ffffff',
        marginLeft: 53,
        marginRight:52,
    },
    modalTitle: {
        fontSize: 17,
        color: '#444444',
        lineHeight: 23,
        letterSpacing: -0.1,
        fontFamily: 'PingFang-SC-Medium'
    },
    modalTextInputContainer: {
        width: 240,
        height: 35,
        borderWidth: 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',
        borderColor: '#e0e0e0',
        borderWidth: 0.5,
    },
    itemView: {
        width: 52,
        height: 52,
        marginTop: 2,
        overflow: 'hidden'
    },
    image: {
        width: 208,
        height: 208
    }

});