import Button from 'apsl-react-native-button';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import React, { Component } from 'react';
import { Keyboard, PermissionsAndroid, ProgressBarAndroid, ScrollView, StyleSheet, Text, View, Platform, Alert } from 'react-native';
import * as Animatable from 'react-native-animatable';
import I18n from 'react-native-i18n';
import { MaterialDialog } from "react-native-material-dialog";
import { Dropdown } from 'react-native-material-dropdown';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { Fumi } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Geolocation from 'react-native-geolocation-service';
import { identityPieces, paysDestinationData, walletActifData, typeIdIDestinataire, isIlinkWorldWallet } from '../../../utils/UtilsFunction';
import { Color } from '../../../config/Color';
import { getActiveCountryAction, getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getActiveCountryReset, getPayCountryNetworkAction, getPayCountryNetworkReset } from '../../../webservice/CountryApi';
import { readUser, getTownInformationName, getListCountriesActive } from '../../../webservice/AuthApi';
import { getPositionInformation } from '../../../webservice/MapService';
let theme = require('../../../utils/theme.json');
let route = require('../../../route.json');
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
const moment = require('moment');

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

     };

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

     constructor(props) {
          super(props);
          this.state = {
               identityPieces: identityPieces(),
               identityPiecesName: (identityPieces()[0]).name,
               paysDestination: [],
               paysDestinationSelect: null,
               walletActifs: [],
               walletActifSelect: null,
               typeIdDestinataire: typeIdIDestinataire(),
               typeIdDestinataireSelect: (typeIdIDestinataire()[0].name),
               numeroTelephoneOrWalletCode: null,
               numeroIdentite: null,
               montant: null,
               password: null,
               isIlinkWorldWalletSelect: false,
               loading: false,
               user: null,
               modalVisible: true,
               hasLoadActiveCountryList: true,
               hasLoadActivePayCountryNetworkList: true,
               triggerSubmitClick: false
          };

          this.props.getActiveCountryReset();
          this.props.getActiveCountryByDialCodeReset();
          this.props.getPayCountryNetworkReset();

     }

     componentDidMount() {

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


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

     }

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

     renderGetActionCountryList = () => {

          const { resultActiveCountryList, errorActiveCountryList } = this.props;
          if (resultActiveCountryList !== null) {
               if (typeof resultActiveCountryList.response !== 'undefined') {

                    this.setState({
                         hasLoadActiveCountryList: false,
                         paysDestination: resultActiveCountryList.response,
                         modalVisible: false
                    });
                    this.watchLocation();
               }
          }

          if (errorActiveCountryList !== null) {
               if (typeof errorActiveCountryList.data !== 'undefined') {
                    Alert.alert(
                         I18n.t('ERROR_LABEL'),
                         errorActiveCountryList.data.error,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.getActiveCountryReset();
                                   }
                              }

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

                         ],
                         { cancelable: false }
                    )
               }
          }
     }

     renderGetPayCountryNetworkResponse = () => {
          const { resultPayCountryNetwork, errorPayCountryNetwork } = this.props;
          if (resultPayCountryNetwork !== null) {
               if (typeof resultPayCountryNetwork.response !== 'undefined') {
                    let typeIdentifiant = isIlinkWorldWallet(resultPayCountryNetwork.response[0].type) ? I18n.t('CODE_WALLET') : I18n.t('PHONE');
                    this.setState({
                         hasLoadActivePayCountryNetworkList: false,
                         walletActifs: resultPayCountryNetwork.response,
                         walletActifSelect: resultPayCountryNetwork.response[0].name,
                         typeIdDestinataireSelect: typeIdentifiant,
                         isIlinkWorldWalletSelect: isIlinkWorldWallet(resultPayCountryNetwork.response[0].type)
                    })
               }
          }

          if (errorPayCountryNetwork !== null) {
               if (typeof errorPayCountryNetwork.data !== 'undefined') {
                    Alert.alert(
                         I18n.t('ERROR_LABEL'),
                         errorPayCountryNetwork.data.error,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.getPayCountryNetworkReset();
                                   }
                              }

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

                         ],
                         { cancelable: false }
                    )
               }
          }
     }

     showErrorDialog() {
          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.pop() } }])
     }


     async watchLocation() {
          Geolocation.getCurrentPosition((position) => {
               this.props.getActiveCountryAction();
               this.treatPosition(position);
               return position;
          }, (e) => {
               this.showErrorDialog()
          }, this.props.geolocationOptions);
          if (!this.watchID) {
               Geolocation.watchPosition((position) => { this.treatPosition(position); return 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 {
                    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.pop()
                              }
                         }])
               }
          } catch (err) {
               Alert.alert("Une erreur est Survenue",
                    "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
                    [{
                         text: "Ok", onPress: () => {
                              this.props.navigation.pop();
                         }
                    }])
          }
     }

     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 !== undefined) {
                              if (response.results.length > 0) {

                                   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 })
                                             }
                                        }
                                   }
                                   if (this.state.paysDestination.length > 0) {

                                        var found = false;
                                        for (let country of this.state.paysDestination) {
                                             if (country.code_country === shortcountry) {
                                                  found = true;
                                                  this.setState({
                                                       modalVisible: false, indicatifCountry: country.code_dial,
                                                       paysDestinationSelect: country.name
                                                  });
                                                  if (this.state.hasLoadActivePayCountryNetworkList)
                                                       this.props.getPayCountryNetworkAction(country.id);
                                             }
                                        }
                                        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" }]);

                                        }
                                   }

                              }

                         } else {
                              Alert.alert(
                                   I18n.t("UNABLE_TO_CONNECT_TITLE"),
                                   I18n.t('TEXT_NETWORK_UNABLE')
                                   ,
                                   [
                                        { text: I18n.t("NO"), onPress: () => { this.props.navigation.pop() } },
                                        {
                                             text: I18n.t("YES"), onPress: () => {
                                                  this.treatPosition(myPosition)
                                             }
                                        }

                                   ],
                                   { cancelable: false }
                              )
                         }
                    }
               }).catch((e) => {
                    console.log("CATCH", e);
                    this.showErrorDialog();
               });
               this.setState({ myPosition: myPosition });
          }

     }

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

     isMontantValid = () => {
          const { montant } = this.state;
          if ((parseInt(isEqual(montant, 0)) || montant < 0))
               return {
                    errorMessage: I18n.t('ENTER_AMOUNT_SUPERIOR_ZEROR'),
                    isValid: false
               };

          else if (!this.isNormalInteger(montant))
               return {
                    errorMessage: I18n.t('ENTER_VALID_AMOUNT'),
                    isValid: false
               };


          else if (montant > parseInt(this.state.comptePrincipal))
               return {
                    errorMessage: I18n.t('AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT'),
                    isValid: false
               };

          else
               return {
                    errorMessage: '',
                    isValid: true
               };
     }

     onSubmitSendWalletToWallet = () => {
          const { identityPiecesName, paysDestinationSelect, numeroIdentite, walletActifSelect, typeIdDestinataireSelect, numeroTelephoneOrWalletCode, montant, password } = this.state;

          if (this.ckeckIfFieldIsOK(identityPiecesName))
               this.identityPiecesAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(paysDestinationSelect))
               this.paysDestinationAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(walletActifSelect))
               this.walletActifAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(typeIdDestinataireSelect))
               this.typeIdDestinataireAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(numeroIdentite))
               this.numeroIdentiteAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(numeroTelephoneOrWalletCode))
               this.numeroTelephoneAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(montant) || this.isMontantValid().isValid)
               this.montantAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(password))
               this.passwordAnim.shake(800);
          else {
               this
          }
          this.setState({
               triggerSubmitClick: true
          })

     }

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

     render() {
          console.log("STATE", this.state);
          return (
               <>
                    {(this.state.modalVisible || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
                    {this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
                    {this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
                    {this.state.triggerSubmitClick && this.renderEnvoieWalletToWalletResponse()}
                    {this.state.triggerNextClick && this.renderGetNumberResponse()} */}
                    <ScrollView style={styles.container}>

                         <Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_WALLET')}</Text>

                         <Animatable.View ref={(comp) => { this.paysDestinationAnim = comp }}
                              style={{
                                   width: responsiveWidth(90),
                                   height: 60,
                                   marginTop: 20,
                                   alignSelf: 'center',
                                   borderRadius: 10,
                                   paddingLeft: 20,
                                   paddingRight: 20,
                                   backgroundColor: 'white'
                              }}>
                              <Dropdown
                                   label={I18n.t('PAYS_DESTINATION')}
                                   data={this.state.paysDestination}
                                   useNativeDriver={true}
                                   value={this.state.paysDestinationSelect === null ? '' : this.state.paysDestinationSelect}
                                   onChangeText={(value, index, data) => {
                                        this.props.getPayCountryNetworkReset();

                                        let countrySelect = data.filter(element => element.name === value);
                                        this.setState({ paysDestinationSelect: value, hasLoadActivePayCountryNetworkList: true }, () => {
                                             this.props.getPayCountryNetworkAction(countrySelect[0].id);
                                        });
                                   }}
                                   valueExtractor={(value) => { return value.name }}
                                   labelExtractor={(value) => { return value.name }}
                              />
                         </Animatable.View>

                         <Animatable.View ref={(comp) => { this.walletActifAnim = comp }}
                              style={{
                                   width: responsiveWidth(90),
                                   height: 60,
                                   marginTop: 20,
                                   alignSelf: 'center',
                                   borderRadius: 10,
                                   paddingLeft: 20,
                                   paddingRight: 20,
                                   backgroundColor: 'white'
                              }}>
                              <Dropdown
                                   label={I18n.t('ACTIVE_WALLET')}
                                   data={this.state.walletActifs}
                                   useNativeDriver={true}
                                   value={isNil(this.state.walletActifSelect) ? '' : this.state.walletActifSelect}
                                   onChangeText={(value, index, data) => {
                                        this.setState({ walletActifSelect: value });
                                   }}
                                   valueExtractor={(value) => { return value.name }}
                                   labelExtractor={(value) => { return value.name }}
                              />
                         </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 value.name }}
                                   labelExtractor={(value) => { return 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.typeIdDestinataireAnim = comp }}
                              style={{
                                   width: responsiveWidth(90),
                                   height: 60,
                                   marginTop: 20,
                                   alignSelf: 'center',
                                   borderRadius: 10,
                                   paddingLeft: 20,
                                   paddingRight: 20,
                                   backgroundColor: 'white'
                              }}>
                              <Dropdown
                                   disabled={this.state.isIlinkWorldWalletSelect}
                                   label={I18n.t('TYPE_IDENTIFIANT')}
                                   data={this.state.typeIdDestinataire}
                                   useNativeDriver={true}
                                   value={this.state.typeIdDestinataireSelect}
                                   onChangeText={(value, index, data) => {
                                        this.setState({ typeIdDestinataireSelect: value });
                                   }}
                                   valueExtractor={(value) => { return value.name }}
                                   labelExtractor={(value) => { return value.name }}
                              />
                         </Animatable.View>

                         <Animatable.View ref={(comp) => { this.numeroTelephoneAnim = comp }}>
                              <Fumi iconClass={FontAwesomeIcon} iconName={isEqual(this.state.typeIdDestinataireSelect, I18n.t('PHONE')) ? 'phone' : 'lock'}
                                   label={isEqual(this.state.typeIdDestinataireSelect, I18n.t('PHONE')) ? I18n.t('PHONE') : I18n.t('CODE_WALLET')}
                                   iconColor={'#f95a25'}
                                   iconSize={20}
                                   value={this.state.numeroTelephoneOrWalletCode}
                                   onChangeText={(numeroTelephoneOrWalletCode) => {
                                        this.setState({ numeroTelephoneOrWalletCode })
                                   }}
                                   style={styles.input}
                              >
                              </Fumi>
                         </Animatable.View>

                         <Animatable.View ref={(comp) => { this.montantAnim = comp }}>
                              <Fumi iconClass={FontAwesomeIcon} iconName={'money'}
                                   label={I18n.t('AMOUNT')}
                                   iconColor={'#f95a25'}
                                   iconSize={20}
                                   value={this.state.montant}
                                   onChangeText={(montant) => {
                                        this.setState({ montant })
                                   }}
                                   style={styles.input}
                              >
                              </Fumi>
                         </Animatable.View>

                         <Animatable.View ref={(comp) => { this.passwordAnim = comp }}>
                              <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                                   label={I18n.t('PASSWORD')}
                                   iconColor={'#f95a25'}
                                   iconSize={20}
                                   value={this.state.password}
                                   onChangeText={(password) => {
                                        this.setState({ password })
                                   }}
                                   style={styles.input}
                              >
                              </Fumi>
                         </Animatable.View>

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

const maptStateToProps = state => ({
     loadingCountryByDialCode: state.countryByDialCode.loading,
     resultCountryByDialCode: state.countryByDialCode.result,
     errorCountryByDialCode: state.countryByDialCode.error,

     loadingActiveCountryList: state.activeCountryListReducer.loading,
     resultActiveCountryList: state.activeCountryListReducer.result,
     errorActiveCountryList: state.activeCountryListReducer.error,

     loadingPayCountryNetwork: state.payCountryNetworkReducer.loading,
     resultPayCountryNetwork: state.payCountryNetworkReducer.result,
     errorPayCountryNetwork: state.payCountryNetworkReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
     getActiveCountryByDialCodeAction,
     getActiveCountryByDialCodeReset,

     getPayCountryNetworkAction,
     getPayCountryNetworkReset,

     getActiveCountryAction,
     getActiveCountryReset

}, dispatch);

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

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