import React, { Component } from 'react';
import { Alert, ActivityIndicator, StyleSheet, Text, View, Image, ScrollView, Platform, ProgressBarAndroid, PermissionsAndroid, Keyboard } from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
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';
let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');
import I18n from 'react-native-i18n';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import { Color } from '../../config/Color';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Dropdown } from 'react-native-material-dropdown-v2';
import { getPositionInformation } from './../../webservice/MapService';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { getCountryNetwork, createGeolocatedAccount, createUserAccount, getTownInformationName, getListCountriesActive, getCodeInformation, readUser } from './../../webservice/AuthApi';
import { SinglePickerMaterialDialog, MultiPickerMaterialDialog, MaterialDialog } from "react-native-material-dialog";
import Geolocation from 'react-native-geolocation-service';
import { identityPieces } from '../../utils/UtilsFunction';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { createIndentificationAction, createIndentificationResetAction, getNumberResetAction, getNumberDetailAction, getUserIdentificationAction } from '../../webservice/IdentificationApi';
import SwitchSelector from "react-native-switch-selector";
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
const moment = require('moment');

class CreateIdentification extends Component {
     static navigatorStyle = {
          navBarBackgroundColor: Color.primaryColor,
          statusBarColor: Color.primaryDarkColor,
          navBarTextColor: '#FFFFFF',
          navBarButtonColor: '#FFFFFF'

     };

     static navigationOptions = () => {
          return {
               drawerLabel: () => null,
               headerTitle: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION'),
               headerTintColor: 'white',
               headerStyle: {
                    backgroundColor: Color.primaryColor,
                    marginTop: 0,
                    color: 'white'
               },
               headerTitleStyle: {
                    color: "white"
               },
               title: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')
          }
     };

     constructor(props) {
          super(props);
          this.state = {
               enterPhone: null,
               firstname: null,
               lastname: null,
               numeroIdentite: null,
               dateNaissance: null,
               dateExpiration: null,
               numeroTelephone: null,
               networksinglePickerVisible: false,
               confirmpassanim: null,
               userId: null,
               isLoging: false,
               countries: [],
               town: [],
               townName: null,
               country: null,
               identityPieces: identityPieces(),
               identityPiecesName: I18n.t((identityPieces()[0]).name),
               snackVisible: false,
               snackText: '',
               disableNetwork: false,
               networks: [],
               showPickerDateNaissance: false,
               showPickerDateExpiration: false,
               modalVisible: true,
               select_network: I18n.t("SELECT_NETWORK"),
               user: null,
               triggerSubmitClick: false,
               triggerNextClick: false,
               displayFirstStep: true,
               displaySecondStep: false,
               sexe: [
                    {label: I18n.t('MASCULIN'), value: "M"},
                    {label: I18n.t('FEMININ'), value: "F"},
               ],
               gender: 'M'
          };
          this.dateNaissanceFumiProps = {};
          this.dateExpirationFumiProps = {};
          this.props.createIndentificationResetAction();
          this.props.getNumberResetAction();
     }

     componentDidMount() {

          readUser().then((user) => {
               if (user) {
                    if (user !== undefined) {
                         this.setState({ user });
                    }
               }
          });

          if (Platform.OS === 'android') {
               this.requestCameraPermission();
          } else {
               this.watchLocation();
          }

     }

     renderCreateIdentificationResponse() {
          const { result, error } = this.props;

          console.log("PROPS", this.props);

          if (result !== null) {
               if (typeof result.response !== 'undefined') {
                    Alert.alert(
                         I18n.t('SUCCESS_IDENTIFICATION'),
                         result.response,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.createIndentificationResetAction();
                                        this.props.getUserIdentificationAction(this.state.user.phone);
                                        this.setState({ triggerSubmitClick: false });
                                        this.props.navigation.pop();
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }

          if (error !== null) {
               if (typeof error.data !== 'undefined') {
                    Alert.alert(
                         I18n.t('ERROR_IDENTIFICATION'),
                         error.data.error,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.createIndentificationResetAction();
                                        this.setState({ triggerSubmitClick: false });
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               } else {
                    Alert.alert(
                         I18n.t('ERROR_IDENTIFICATION'),
                         JSON.stringify(error),
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.createIndentificationResetAction();
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }
     }

     componentWillUpdate(nextProps, nextState) {
          let dateNaissance = nextState.dateNaissance || new Date();

          if (this.state.showPickerDateNaissance)
               this.dateNaissanceFumiProps.value = moment(dateNaissance).format('DD-MM-YYYY');
          if (this.state.showPickerDateExpiration)
               this.dateExpirationFumiProps.value = moment(nextState.dateExpiration).format('DD-MM-YYYY');
     }

     componentWillUnmount() {
          this.mounted = false;
          if (this.watchID) Geolocation.clearWatch(this.watchID);
     }

     showErrorDialog() {
          this.setState({ modalDialog: false })
          Alert.alert("Une erreur est survenue", "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
               "et que vous êtes connecté à internet puis ressayer", [{
                    text: "Recommencer", onPress: () => {
                         this.watchLocation()
                    }
               }, { text: "Annuler", onPress: () => { this.props.navigation.popToTop() } }])
     }

     async watchLocation() {
          Geolocation.getCurrentPosition((position) => {
               this.treatPosition(position)
          }, (e) => {
               this.showErrorDialog()
          }, this.props.geolocationOptions);
          if (!this.watchID) {
               Geolocation.watchPosition((position) => { this.treatPosition(position) }, (e) => { this.showErrorDialog() }, this.props.geolocationOptions)
          }
     }

     async requestCameraPermission() {
          try {
               const granted = await PermissionsAndroid.request(
                    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                    {
                         'title': 'Cool Photo App Camera Permission',
                         'message': 'Cool Photo App needs access to your camera ' +
                              'so you can take awesome pictures.'
                    }
               )
               if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                    this.watchLocation();
               } else {
                    this.setState({ modalDialog: false })
                    Alert.alert("Echec à l'autorisation",
                         "L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
                         [{
                              text: "Ok", onPress: () => {
                                   this.props.navigation.popToTop()
                              }
                         }])
               }
          } catch (err) {
               this.setState({ modalDialog: false })
               Alert.alert("Une erreur est Survenue",
                    "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
                    [{
                         text: "Ok", onPress: () => {
                              BackHandler.exitApp()
                         }
                    }])
          }
     }

     treatPosition(position) {
          const myLastPosition = this.state.myPosition;
          const myPosition = position.coords;

          if (!isEqual(myPosition, myLastPosition)) {
               getPositionInformation(myPosition).then((response) => {
                    if (response.results !== undefined) {
                         if (response.results.length > 0) {
                              let most = response.results[0]
                              let { address_components, formatted_address, place_id } = most
                              this.setState({ address: address_components, textadress: formatted_address, place: place_id })

                              let results = response.results;
                              let shortcountry;
                              let mcountry;
                              for (let i = 0; i < results[0].address_components.length; i++) {
                                   for (let j = 0; j < results[0].address_components[i].types.length; j++) {
                                        if (results[0].address_components[i].types[j] === "country") {
                                             mcountry = results[0].address_components[i];
                                             shortcountry = mcountry.short_name;
                                             this.setState({ shortCountry: mcountry.short_name, longCountry: mcountry.long_name })
                                        } else if (results[0].address_components[i].types[j] === "locality") {
                                             const name = results[0].address_components[i].short_name;
                                             this.setState({ townName: name });
                                             getTownInformationName(name).then((result) => {
                                                  let town = null;
                                                  if (result instanceof Array) {
                                                       town = result[0];
                                                  } else {
                                                       town = result;
                                                  }

                                                  this.setState({ modalVisible: false, town: new Array(town) });
                                             })
                                        }
                                   }
                              }
                              getListCountriesActive().then((cnt) => {
                                   this.setState({ countries: cnt })
                                   console.debug(cnt, shortcountry);
                                   var found = false
                                   for (let i of cnt) {
                                        if (i.code_country === shortcountry) {
                                             found = true;
                                             this.setState({ modalVisible: false, indicatif: i.code_dial, country: i.name })
                                             /*                                              this.getNetworks(i.code_dial); */
                                        }
                                   }
                                   if (!found) {
                                        Alert.alert("Impossible de recupérer vos informations", "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs", [{ text: "OK" }]);

                                   }
                              })


                         }

                    }
               }).catch((e) => {
                    this.showErrorDialog()
               });
               this.setState({ myPosition: myPosition });
          }

     }

     onChangeDateNaissance = (event, selectedDate) => {
          let dateNaissance = isNil(this.state.dateNaissance) ? new Date() : this.state.dateNaissance;
          const currentDate = selectedDate || dateNaissance;
          this.setState({
               showPickerDateNaissance: Platform.OS === 'ios' || false,
               dateNaissance: currentDate,
          });
     };

     onChangeDateExpiration = (event, selectedDate) => {
          let dateExpiration = isNil(this.state.dateExpiration) ? new Date() : this.state.dateExpiration;
          const currentDate = selectedDate || dateExpiration;
          this.setState({
               showPickerDateExpiration: Platform.OS === 'ios' || false,
               dateExpiration: currentDate,
          });
     };

     onSubmitNextStep = () => {

          const { numeroTelephone } = this.state;
          this.props.getNumberResetAction();
          if (this.ckeckIfFieldIsOK(numeroTelephone))
               this.numeroTelephoneAnim.shake(800);
          else {
               this.props.getNumberDetailAction(numeroTelephone);
               this.setState({ triggerNextClick: true });
          }
     }
     onSubmitPrevious = () => {
          this.setState({
               displayFirstStep: !this.state.displayFirstStep,
               displaySecondStep: !this.state.displaySecondStep,
          })
     }

     ckeckIfFieldIsOK(champ) {
          return (isNil(champ) || isEqual(champ.length, 0));
     }

     onSubmitIdentityClient = () => {
          const { lastname, numeroTelephone, numeroIdentite, dateNaissance, dateExpiration, country, townName, identityPiecesName } = this.state;

          if (this.ckeckIfFieldIsOK(lastname))
               this.lastnameAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(dateNaissance))
               this.datenaissanceAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(country))
               this.countryAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(townName))
               this.townAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(identityPiecesName))
               this.identityPiecesAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(numeroIdentite))
               this.numeroIdentiteAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(dateExpiration))
               this.identityDateExpiryAnim.shake(800);
          else {
               moment(dateNaissance).format('DD-MM-YYYY')
               this.props.createIndentificationAction({
                    lastname: this.state.lastname,
                    firstname: "",
                    birth_date: moment(this.state.dateNaissance).format('DD-MM-YYYY'),
                    town: this.state.townName,
                    country: this.state.country,
                    identity_document: this.state.identityPiecesName,
                    id_identity_document: this.state.numeroIdentite,
                    expiry_date_document: moment(this.state.dateExpiration).format('DD-MM-YYYY'),
                    phone_number: this.state.numeroTelephone,
                    id_user: this.state.userId,
                    gender: this.state.gender
               });
          }
          this.setState({
               triggerSubmitClick: true
          })

     }

     renderGetNumberResponse = () => {

          const { resultNumberDetail, errorNumberDetail } = this.props;

          console.log("PROPS", this.props);

          if (resultNumberDetail !== null) {
               if (resultNumberDetail.status === 200) {
                    this.setState({
                         lastname: resultNumberDetail.response.lastname,
                         userId: resultNumberDetail.response.id,
                         displayFirstStep: !this.state.displayFirstStep,
                         displaySecondStep: !this.state.displaySecondStep,
                    });
                    this.props.getNumberResetAction();
               }
               /*                if (typeof resultNumberDetail.response !== 'undefined') {
                                   Alert.alert(
                                        "SUCCES",
                                        JSON.stringify(resultNumberDetail.response),
                                        [
                                             {
                                                  text: I18n.t("OK"), onPress: () => {
                                                       this.props.getNumberResetAction();
                                                       this.setState({ triggerNextClick: false })
                                                  }
                                             }

                                        ],
                                        { cancelable: false }
                                   )
                              } */
          }

          if (errorNumberDetail !== null) {
               if (typeof errorNumberDetail.data !== 'undefined') {
                    Alert.alert(
                         I18n.t('ERROR_IDENTIFICATION'),
                         errorNumberDetail.data.error,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.createIndentificationResetAction();
                                        this.setState({ triggerNextClick: false })
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               } else {
                    Alert.alert(
                         I18n.t('ERROR_IDENTIFICATION'),
                         JSON.stringify(errorNumberDetail),
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.createIndentificationResetAction();
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }

     }

     renderLoaderModal() {
          return (
               <MaterialDialog
                    visible={this.state.modalVisible}
                    title={I18n.t("LOADING_INFO")}>
                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                         <Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
                         <ProgressBarAndroid />
                    </View>
               </MaterialDialog>)
     }

     renderLoader = () => {
          return (
               <ProgressDialog
                    visible={this.props.loading || this.props.loadingNumberDetail}
                    title={I18n.t('LOADING')}
                    message={I18n.t('LOADING_INFO')}
               />
          )
     }

     renderDateNaissancePicker = () => {
          return (
               <DateTimePicker
                    testID="dateTimePicker"
                    timeZoneOffsetInMinutes={0}
                    is24Hour={true}
                    value={isNil(this.state.dateNaissance) ? new Date() : this.state.dateNaissance}
                    mode='date'
                    maximumDate={new Date()}
                    display="spinner"
                    onChange={this.onChangeDateNaissance}
               />
          );
     }

     renderDateExpirationPicker = () => {
          return (
               <DateTimePicker
                    testID="dateTimePicker"
                    timeZoneOffsetInMinutes={0}
                    is24Hour={true}
                    value={isNil(this.state.dateExpiration) ? new Date() : this.state.dateExpiration}
                    mode='date'
                    maximumDate={new Date(2300, 10, 20)}
                    display="spinner"
                    onChange={this.onChangeDateExpiration}
               />
          );
     }

     render() {
          console.log("STATE", this.state);
          const { showPickerDateNaissance } = this.state;
          return (
               <>
                    {this.state.showPickerDateNaissance && this.renderDateNaissancePicker()}
                    {this.state.showPickerDateExpiration && this.renderDateExpirationPicker()}
                    {this.state.modalVisible && this.renderLoaderModal()}
                    {(this.props.loading || this.props.loadingNumberDetail) && this.renderLoader()}
                    {this.state.triggerSubmitClick && this.renderCreateIdentificationResponse()}
                    {this.state.triggerNextClick && this.renderGetNumberResponse()}
                    <ScrollView style={styles.container}>

                         {this.state.displayFirstStep &&
                              <>
                                   <Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
                                   <Animatable.View ref={(comp) => { this.numeroTelephoneAnim = comp }}>
                                        <Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
                                             label={I18n.t('PHONE')}
                                             iconColor={'#f95a25'}
                                             keyboardType='phone-pad'
                                             value={this.state.numeroTelephone === null ? this.state.indicatif : this.state.numeroTelephone}
                                             iconSize={20}
                                             onChangeText={(numeroTelephone) => {
                                                  this.setState({ numeroTelephone })
                                             }}
                                             style={styles.input}
                                        >
                                        </Fumi>
                                   </Animatable.View>

                                   <Animatable.View ref={(comp) => { this.countryAnim = comp }}
                                        style={{
                                             width: responsiveWidth(90),
                                             height: 60,
                                             marginTop: 20,
                                             alignSelf: 'center',
                                             borderRadius: 10,
                                             paddingLeft: 20,
                                             paddingRight: 20,
                                             backgroundColor: 'white'
                                        }}>
                                        <Dropdown
                                             label={I18n.t('COUNTRY_CHOICE')}
                                             data={this.state.countries}
                                             useNativeDriver={true}
                                             value={this.state.country === null ? "" :
                                                  this.state.country}
                                             onChangeText={(value, index, data) => {
                                                  this.setState({ country: value });
                                             }}
                                             valueExtractor={(value) => { return value.name }}
                                             labelExtractor={(value) => { return value.name }}
                                        />
                                   </Animatable.View>
                                   <Animatable.View ref={(comp) => { this.townAnim = comp }}
                                        style={{
                                             width: responsiveWidth(90),
                                             height: 60,
                                             marginTop: 20,
                                             alignSelf: 'center',
                                             borderRadius: 10,
                                             paddingLeft: 20,
                                             paddingRight: 20,
                                             backgroundColor: 'white'
                                        }}>
                                        <Dropdown
                                             label={I18n.t('CHOICE_TOWN')}
                                             data={this.state.town}
                                             useNativeDriver={true}
                                             value={this.state.townName === null ? "" :
                                                  this.state.townName}
                                             onChangeText={(value, index, data) => {
                                                  this.setState({ townName: value });
                                             }}
                                             valueExtractor={(value) => { return value.name }}
                                             labelExtractor={(value) => { return value.name }}
                                        />
                                   </Animatable.View>
                                   <Button style={styles.btnvalide}
                                        textStyle={styles.textbtnvalide}
                                        isLoading={this.state.isLoging}
                                        onPress={() => { this.onSubmitNextStep() }}>
                                        {I18n.t('NEXT')}</Button>
                              </>}


                         {this.state.displaySecondStep &&
                              <>
                                   <Animatable.View ref={(comp) => { this.lastnameAnim = comp }}>
                                        <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
                                             label={`${I18n.t('NAME')} ${I18n.t('AND')} ${I18n.t('FIRSTNAME')}`}
                                             iconColor={'#f95a25'}
                                             iconSize={20}
                                             value={this.state.lastname}
                                             onChangeText={(lastname) => {
                                                  this.setState({ lastname })
                                             }}
                                             style={styles.input}
                                        >
                                        </Fumi>
                                   </Animatable.View>
                                   <Animatable.View ref={(comp) => { this.datenaissanceAnim = comp }}>
                                        <Fumi iconClass={FontAwesomeIcon} iconName={'calendar'}
                                             label={I18n.t('DATE_NAISSANCE')}
                                             iconColor={'#f95a25'}
                                             iconSize={20}
                                             style={styles.input}
                                             onFocus={() => {
                                                  Keyboard.dismiss();
                                                  this.setState({ showPickerDateNaissance: true })
                                             }}
                                             {...this.dateNaissanceFumiProps}>
                                        </Fumi>
                                   </Animatable.View>
                                   <Animatable.View ref={(comp) => { this.identityPiecesAnim = comp }}
                                        style={{
                                             width: responsiveWidth(90),
                                             height: 60,
                                             marginTop: 20,
                                             alignSelf: 'center',
                                             borderRadius: 10,
                                             paddingLeft: 20,
                                             paddingRight: 20,
                                             backgroundColor: 'white'
                                        }}>
                                        <Dropdown
                                             label={I18n.t('PIECE_IDENTITE')}
                                             data={this.state.identityPieces}
                                             useNativeDriver={true}
                                             value={this.state.identityPiecesName}
                                             onChangeText={(value, index, data) => {
                                                  this.setState({ identityPiecesName: value });
                                             }}
                                             valueExtractor={(value) => { return I18n.t(value.name) }}
                                             labelExtractor={(value) => { return I18n.t(value.name) }}
                                        />
                                   </Animatable.View>
                                   <Animatable.View ref={(comp) => { this.numeroIdentiteAnim = comp }}>
                                        <Fumi iconClass={FontAwesomeIcon} iconName={'address-card'}
                                             label={`${I18n.t('NUMERO_IDENTITE')}`}
                                             iconColor={'#f95a25'}
                                             iconSize={20}
                                             onChangeText={(numeroIdentite) => {
                                                  this.setState({ numeroIdentite })
                                             }}
                                             style={styles.input}
                                        >
                                        </Fumi>
                                   </Animatable.View>
                                   <Animatable.View ref={(comp) => { this.identityDateExpiryAnim = comp }}>
                                        <Fumi iconClass={FontAwesomeIcon} iconName={'calendar-times-o'}
                                             label={I18n.t('IDENTITY_PIECE_EXPIRY_DATE')}
                                             iconColor={'#f95a25'}
                                             iconSize={20}
                                             style={styles.input}
                                             onFocus={() => {
                                                  Keyboard.dismiss();
                                                  this.setState({ showPickerDateExpiration: true })
                                             }}
                                             {...this.dateExpirationFumiProps}>
                                        </Fumi>
                                   </Animatable.View>

                                   <View style={{
                                        paddingLeft: 20,
                                        paddingRight: 20,
                                        marginTop: 10,
                                        flexDirection: 'row',
                                        justifyContent: "space-between"
                                   }}>
                                        <Text style={{color: Color.whiteColor}}>{I18n.t('SEXE')}</Text>
                                        <View style={styles.contentSwitch}>
                                             <SwitchSelector options={this.state.sexe}
                                                             initial={0}
                                                             style={{
                                                                       width: responsiveWidth(40),
                                                                  }}
                                                             buttonColor={Color.accentColor}
                                                             backgroundColor={Color.primaryDarkColor}
                                                             textColor='white'
                                                             bold={true}
                                                             hasPadding
                                                             height={32}
                                                             onPress={(value) => {
                                                                  this.setState({gender: value})
                                                             }}/>
                                        </View>
                                   </View>

                                   <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
                                        <Button style={styles.btnSubmit}
                                             textStyle={styles.textbtnvalide}
                                             onPress={() => { this.onSubmitPrevious() }}>
                                             {I18n.t('PREVIOUS')}</Button>

                                        <Button style={styles.btnSubmit}
                                             textStyle={styles.textbtnvalide}
                                             isLoading={this.state.isLoging}
                                             onPress={() => { this.onSubmitIdentityClient() }}>
                                             {I18n.t('SUBMIT_LABEL')}</Button>

                                   </View>
                              </>
                         }
                    </ScrollView>
               </>
          )
     }
}

const maptStateToProps = state => ({
     loading: state.createIdentificationReducer.loading,
     result: state.createIdentificationReducer.result,
     error: state.createIdentificationReducer.error,

     loadingNumberDetail: state.getNumberInformationReducer.loading,
     resultNumberDetail: state.getNumberInformationReducer.result,
     errorNumberDetail: state.getNumberInformationReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
     createIndentificationAction,
     createIndentificationResetAction,
     getNumberDetailAction,
     getNumberResetAction,
     getUserIdentificationAction
}, dispatch);

export default connect(maptStateToProps, mapDispatchToProps)(CreateIdentification);

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.primaryDarkColor,
     },
     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: Color.accentLightColor,
          height: 52
     },
     btnSubmit: {
          marginTop: 20,
          borderColor: 'transparent',
          backgroundColor: Color.accentLightColor,
          height: 52,
          width: "30%",
          marginLeft: 20,
          marginRight: 20,
     },
     input: {
          height: 60,
          marginTop: responsiveHeight(2),
          marginLeft: responsiveWidth(5),
          marginRight: responsiveWidth(5),
          borderRadius: 5,
     }
});
