import React, { Component } from 'react';
import {StyleSheet,Text,View,Image,ScrollView} from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { responsiveHeight,responsiveWidth,responsiveFontSize } from 'react-native-responsive-dimensions';
import {Fumi,Kaede} from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable'
import Button from 'apsl-react-native-button'
import {categoryChild} from './../../webservice/AuthApi'
let theme=require('./../../utils/theme.json')
let route=require('./../../route.json')
import I18n from 'react-native-i18n';

export default class CreateAccount extends Component{
    static navigatorStyle = {
        drawUnderNavBar: true,
        navBarHidden:true,
        drawUnderStatusBar: false,
        statusBarHidden: true,
        statusBarTextColorScheme: 'light',
    };

    static options(passProps){
        return {
            topBar:{
                visible:false,
                enabled:false,
                drawBehind: true,

            },
            statusBar:{
                drawBehind: true,
                enabled:false,
            }
        }
    }

    constructor(props){
        super(props);
        this.state=this.initState();
        const { navigation } = this.props;
        this.type = navigation.getParam('type', 0);

    }



    initState() {
        return {
            password: null,
            enterPhone: null,
            nameanim: null,
            surnameanim: null,
            passwordanim: null,
            confirmpassanim: null,
            isLoging: false,
            snackVisible: false,
            snackText: '',
            user: {category:this.type===0?'user':'geolocated'}

        }
    }

    render(){
            return this.type===1?this.renderUserGeoAccount():this.renderUserAccount()

    }

    renderUserGeoAccount() {
        return (<ScrollView style={styles.container}>
            <View style={{flexDirection:"row"}}>
                <Icon.Button name={"keyboard-backspace"}
                color={"white"}
                size={24}
                backgroundColor={'transparent'}
                onPress={()=>this.props.navigation.pop()}
                />
            <Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_AGENT_1')}</Text>
            </View>
            <Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>
            <Animatable.View ref={(comp)=>{this.nameanim=comp}}>
            <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
                  label={I18n.t('NAME')}
                  iconColor={'#f95a25'}
                  iconSize={20}
                  onChangeText={(text)=>{
                      let use=this.state.user;
                      use.lastname=text;
                      this.setState({user:use})}}
                  style={styles.input}
            >
            </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp)=>{this.surnameanim=comp}}>
            <Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
                  label={I18n.t('ADDRESS')}
                  iconColor={'#f95a25'}
                  iconSize={20}
                  keyboardType={"email-address"}
                  style={styles.input}
                  onChangeText={(text)=>{
                      let use=this.state.user;
                      use.address=text;
                      this.setState({user:use})}}

            >
            </Fumi>
            </Animatable.View>
            <Animatable.View  ref={(comp)=>{this.mailanim=comp}}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'envelope'}
                      label={I18n.t('EMAIL')}
                      keyboardType={"email-address"}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      onChangeText={(text)=>{
                          let use=this.state.user;
                          use.email=text;
                          this.setState({user:use})}}

                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View  ref={(comp)=>{this.memberanim=comp}}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'unlock-alt'}
                      label={I18n.t('SPONSOR_CODE')}
                      iconColor={'#f95a25'}
                      onChangeText={(text)=>{
                          let use=this.state.user;
                          use.member=text;
                          this.setState({user:use})}}

                      iconSize={20}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View  ref={(comp)=>{this.passanim=comp}}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                      label={I18n.t('PASSWORD')}
                      iconColor={'#f95a25'}
                      secureTextEntry={true}
                      onChangeText={(text)=>{
                          let use=this.state.user;
                          use.password=text;
                          this.setState({user:use})}}
                      iconSize={20}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View  ref={(comp)=>{this.confirmanim=comp}}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                      secureTextEntry={true}

                      label={I18n.t('CONFIRM_PASSWORD')}
                      iconColor={'#f95a25'}
                      onChangeText={(text)=>{
                          let use=this.state.user;
                          use.confirmpass=text;
                          this.setState({user:use})}}

                      iconSize={20}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Button style={styles.btnvalide}
                    textStyle={styles.textbtnvalide}
                    isLoading={this.state.isLoging}
                    onPress={()=>{this.checkUserGeolocated()}}>
                {I18n.t('NEXT')}</Button>

        </ScrollView>)

    }

    renderUserAccount() {
        return (<ScrollView style={styles.container}>
        <View style={{flexDirection:'row'}}>
          <Icon.Button name={"keyboard-backspace"}
                color={"white"}
                size={24}
                backgroundColor={'transparent'}
                onPress={()=>this.props.navigation.pop()}
                />
                <Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_1')}</Text>
                </View>
                <Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>
            <Animatable.View ref={(comp)=>{this.nameanim=comp}}>
            <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
                      label={I18n.t('NAME')}
                  onChangeText={(text)=>{
                      let use=this.state.user;
                      use.lastname=text;
                      this.setState({user:use})}}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp)=>{this.surnameanim=comp}}>
            <Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
                      label={I18n.t('ADDRESS')}
                      iconColor={'#f95a25'}
                      iconSize={20}

                  keyboardType={"email-address"}
                  onChangeText={(text)=>{
                      let use=this.state.user;
                      use.address=text;
                      this.setState({user:use})}}

                  style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View  ref={(comp)=>{this.mailanim=comp}}>
            <Fumi iconClass={FontAwesomeIcon}
                      iconName={'envelope'}
                  keyboardType={"email-address"}
                      label={I18n.t('EMAIL')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                  onChangeText={(text)=>{
                      let use=this.state.user;
                      use.email=text;
                      this.setState({user:use})}}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View  ref={(comp)=>{this.passanim=comp}}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                      label={I18n.t('PASSWORD')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      secureTextEntry={true}
                      onChangeText={(text)=>{
                          let use=this.state.user;
                          use.password=text;
                          this.setState({user:use})}}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View  ref={(comp)=>{this.confirmanim=comp}}>
            <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                  secureTextEntry={true}
                  label={I18n.t('CONFIRM_PASSWORD')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                  onChangeText={(text)=>{
                      let use=this.state.user;
                      use.confirmpass=text;
                      this.setState({user:use})}}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>

                <Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
                        onPress={()=>{this._onUserCreateAccount()}}>{I18n.t('NEXT')}</Button>

            </ScrollView>)
    }

    _onUserCreateAccount() {
        let { user }=this.state;
        console.log(user)
        if(user!==undefined) {
            if (this.checkOrShake(user.lastname, this.nameanim)) {
                if (this.checkOrShake(user.address, this.surnameanim)) {
                    if (this.checkOrShake(user.email, this.mailanim)) {
                            if (this.checkOrShake(user.password, this.passanim)) {
                                if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
                                    if (user.confirmpass === user.password) {
                                        this.props.navigation.push(route.creationstep2,{
                                                    type: this.type,
                                                    user: user

                                        })
                                    }else{
                                        this.passanim.shake(800)
                                        this.confirmanim.shake(800)
                                    }
                                }


                        }
                    }
                }}
        }else{
            /*this.props.navigator.showSnackbar({
                text:"impossible de trouvé l'utilisateur"
            })
            console.log(user)
        */}

    }

    checkUserGeolocated() {
        let { user }=this.state;
        this.setState({isLoging:true})
        if(user!==undefined) {
            if (this.checkOrShake(user.lastname, this.nameanim)) {
                if (this.checkOrShake(user.address, this.surnameanim)) {
                    if (this.checkOrShake(user.email, this.mailanim)) {
                        if (this.checkOrShake(user.member, this.memberanim)) {
                                categoryChild(user.member).then((codes)=>{
                                    if (codes!==undefined && codes!==null&& codes.child !== undefined) {
                                        let user = this.state.user;
                                        user.category = codes.child;
                                        this.setState({user: user})
                                    }        this.setState({isLoging:false})
                                    if (this.checkOrShake(user.password, this.passanim)) {
                                            if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
                                                if (user.password === user.confirmpass) {
                                                    this.props.navigation.push(route.creationstep2, {
                                                                type: this.type,
                                                                user: user
                                                    })
                                                }else{
                                                    this.passanim.shake(800)
                                                    this.confirmanim.shake(800)
                                                    this.setState({isLoging:false})
                                                }
                                            }else {
                                                this.setState({isLoging:false})
                                            }
                                        }else this.setState({isLoging:false})

                                }).catch((e)=>{        this.setState({isLoging:false})
                                })

                        }else this.setState({isLoging:false})

                    }else this.setState({isLoging:false})

                }else this.setState({isLoging:false})

            }else this.setState({isLoging:false})

        }else{
            this.setState({isLoging:false})
            /*this.props.navigator.showSnackbar({
                text:"impossible de trouvé la variable user"
            })*/
            console.log(user)
        }

    }

    checkOrShake(champ,view) {
        let res=false;
        if(champ!==undefined && champ.length>0) {
                res = true;
        }else{
            view.shake(800)
        }
        return res;
    }
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:theme.primaryDark,
    },
    textbtnvalide:{
      color:'white',
        fontWeight:'bold'
    },
    bigtitle:{
      color:'white',
      fontSize:20,
      flex:1,
        fontWeight:'bold',
        textAlign:'center',
        margin:20,
    },
    subbigtitle:{
        color:'white',
        fontSize:17,
        textAlign:'center',
        margin:5,
    },
    btnvalide:{
      marginTop:20,
      marginLeft:20,
        marginRight:20,
        borderColor:'transparent',
        backgroundColor:theme.accentLight,
        height:52
    },
    input:{
        height:60,
        marginTop:responsiveHeight(2),
        marginLeft:responsiveWidth(5),
        marginRight:responsiveWidth(5),
        borderRadius:5,
    }
})