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,
     }
})