import Button from 'apsl-react-native-button';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import React, {Component} from 'react';
import {Alert, ScrollView, StyleSheet, Text, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
import I18n from 'react-native-i18n';
import Dialog from "react-native-dialog";
import {Dropdown} from 'react-native-material-dropdown-v2';
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 {Color} from '../../../config/Color';
import {store} from "../../../redux/store";
import {identityPieces, isIlinkWorldWallet, isNormalInteger, typeIdIDestinataire} from '../../../utils/UtilsFunction';
import { LiteCreditCardInput } from "react-native-credit-card-input";
import {readUser} from '../../../webservice/AuthApi';
import {
    getActiveCountryAction,
    getActiveCountryByDialCodeAction,
    getActiveCountryByDialCodeReset,
    getActiveCountryReset,
    getPayCountryNetworkAction,
    getPayCountryNetworkReset
} from '../../../webservice/CountryApi';
import {
    envoieUserWalletToWalletAction,
    envoieUserWalletToWalletReset,
    getCommissionUserWalletToWalletAction,
    getCommissionUserWalletToWalletReset,
    envoieUserWalletToCardReset,
    envoieUserWalletToCardAction
} from '../../../webservice/EnvoieUserApi';
import {FontWeight, Typography} from '../../../config/typography';
import thousands from 'thousands';
import {IlinkEmitter} from '../../../utils/events';

let theme = require('../../../utils/theme.json');
let route = require('../../../route.json');

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

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

    constructor(props) {
        super(props);
        this.state = {
            identityPieces: identityPieces(),
            identityPiecesName: I18n.t((identityPieces()[0]).name),
            paysDestination: [],
            countryCustomer: [],
            paysDestinationSelect: null,
            paysCarteSelect: null,
            walletActifs: [],
            walletActifSelect: null,
            typeIdDestinataire: typeIdIDestinataire(),
            typeIdDestinataireSelect: (typeIdIDestinataire()[0].value),
            numeroTelephoneOrWalletCode: null,
            numeroIdentite: null,
            montant: null,
            password: null,
            isIlinkWorldWalletSelect: false,
            loading: false,
            numeroSerie: '',
            numCarte: 0,
            cvv: 0,
            codeCVV: null,
            expiration_date: '',
            creditCardInput: {},
            user: null,
            nomsDestinataire: null,
            prenomsDestinataire: null,
            modalVisible: false,
            hasLoadActiveCountryList: false,
            hasLoadActivePayCountryNetworkList: false,
            triggerSubmitClick: false,
            isDataSubmit: false,
            isModalConfirmVisible: false,
            wallet: store.getState().walletDetailReducer.result.response,
            with_linked_card: false,
            displayFirstStep: true,
               displaySecondStep: false,
        };
        //4066082009294100
        this.props.envoieUserWalletToCardReset();
        this.props.getActiveCountryReset();
        this.props.getActiveCountryByDialCodeReset();
        this.props.getPayCountryNetworkReset();
        this.props.envoieUserWalletToWalletReset();
        this.props.getCommissionUserWalletToWalletReset();

        this.props.getActiveCountryAction();
        console.log("ENVOIE WALLET PROPS", this.props);
    }

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

    }

    componentWillReceiveProps(nextProps) {

        if (nextProps.resultEnvoieWalletToWalletGetCommission != null) {

            if (typeof nextProps.resultEnvoieWalletToWalletGetCommission.response !== 'undefined') {

                if (!nextProps.loadingEnvoieWalletToWalletGetCommission)
                    this.setState({
                        isModalConfirmVisible: true
                    });
            }
        }
    }

    renderGetActionCountryList = () => {

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

                this.setState({
                    hasLoadActiveCountryList: false,
                    countryCustomer: resultActiveCountryList.response,
                    paysDestination: resultActiveCountryList.response,
                    paysDestinationSelect: resultActiveCountryList.response[0].name,
                    paysCarteSelect: resultActiveCountryList.response[0].name,
                    
                });
                if (this.state.hasLoadActivePayCountryNetworkList)
                    this.props.getPayCountryNetworkAction({
                        id_wallet_user: this.state.wallet.id,
                        id_country: resultActiveCountryList.response[0].id
                    });
           // }
        }

        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') {
                if (resultPayCountryNetwork.response.length > 0) {
                    let typeIdentifiant = isIlinkWorldWallet(resultPayCountryNetwork.response[0].type) ? 'user_code' : 'phone';
                    this.setState({
                        hasLoadActivePayCountryNetworkList: false,
                        walletActifs: resultPayCountryNetwork.response,
                        walletActifSelect: resultPayCountryNetwork.response[0].name,
                        typeIdDestinataireSelect: typeIdentifiant,
                        isIlinkWorldWalletSelect: isIlinkWorldWallet(resultPayCountryNetwork.response[0].type),
                        modalVisible: false
                    });
                } else if (resultPayCountryNetwork.response.length === 0) {
                    this.setState({
                        walletActifs: [],
                        walletActifSelect: '',
                        modalVisible: false,
                        hasLoadActivePayCountryNetworkList: false,
                    });
                }
            }
        }

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


    // renderEnvoieWalletToWalletResponse = () => {
   
    //     const {resultEnvoieWalletToWallet, errorEnvoieWalletToWallet} = this.props;
    //     // if (errorEnvoieWalletToWallet !== null) {
    //     //     if (typeof errorEnvoieWalletToWallet.data !== 'undefined') {
    //     //         Alert.alert(
    //     //             I18n.t("ERROR_TRANSFER"),
    //     //             errorEnvoieWalletToWallet.data.error,
    //     //             [
    //     //                 {
    //     //                     text: I18n.t("OK"), onPress: () => {
    //     //                         this.props.envoieUserWalletToWalletReset();
    //     //                     }
    //     //                 }
    //     //             ],
    //     //             {cancelable: false}
    //     //         )
    //     //     }
    //     // }

    //     // if (resultEnvoieWalletToWallet !== null) {
    //     //     if (resultEnvoieWalletToWallet.response !== null) {
    //     //         Alert.alert(
    //     //             I18n.t("SUCCESS_TRANSFER"),
    //     //             resultEnvoieWalletToWallet.response,
    //     //             [
    //     //                 {
    //     //                     text: I18n.t("OK"), onPress: () => {
    //     //                         this.props.envoieUserWalletToWalletReset();
    //     //                         IlinkEmitter.emit("refreshWallet");
    //     //                         this.props.navigation.pop();
    //     //                     }
    //     //                 }

    //     //             ],
    //     //             {cancelable: false}
    //     //         )
    //     //     }
    //     // }
    //     if (errorEnvoieWalletToWallet !== null) {
    //         if (typeof errorEnvoieWalletToWallet.data !== 'undefined') {
    //              Alert.alert(
    //                   I18n.t("WITHDRAWAL_ERROR"),
    //                   errorEnvoieWalletToWallet.data.error,
    //                   [
    //                        {
    //                             text: I18n.t("OK"), onPress: () => {
    //                                  this.props.envoieUserWalletToCardReset();
    //                             }
    //                        }
    //                   ],
                      
    //                   { cancelable: false }
    //              )
    //         }
    //    }

    //    if (resultEnvoieWalletToWallet !== null) {
    //         if (resultEnvoieWalletToWallet.status === 301) {
    //              this.props.envoieUserWalletToCardReset();
    //              try{
    //                  this.props.navigation.push('webviewScreen', {
    //                      url: resultEnvoieWalletToWallet.response.payment_url,
    //                      requestBody: this.getRequestBody()
                         
    //                  });
    //              } catch(error) {
    //                  console.log('error', error);
    //              }
    //         }

    //         if (resultEnvoieWalletToWallet.status === 200) {
    //              if (resultEnvoieWalletToWallet.response !== null) {
    //                   Alert.alert(
    //                        I18n.t("WITHDRAWAL_SUCCESS"),
    //                        resultEnvoieWalletToWallet.response,
    //                        [
    //                             {
    //                                  text: I18n.t("OK"), onPress: () => {
    //                                       this.props.envoieUserWalletToCardReset();
    //                                       IlinkEmitter.emit("refreshWallet");
    //                                       this.props.navigation.pop();
    //                                  }
    //                             }
  
    //                        ],
    //                        { cancelable: false }
    //                   )
    //              }
    //         }
    //     }

    // }
    renderEnvoieWalletToWalletResponse = () => {
   
        const {resultEnvoieWalletToWallet, errorEnvoieWalletToWallet} = this.props;
        // if (errorEnvoieWalletToWallet !== null) {
        //     if (typeof errorEnvoieWalletToWallet.data !== 'undefined') {
        //         Alert.alert(
        //             I18n.t("ERROR_TRANSFER"),
        //             errorEnvoieWalletToWallet.data.error,
        //             [
        //                 {
        //                     text: I18n.t("OK"), onPress: () => {
        //                         this.props.envoieUserWalletToWalletReset();
        //                     }
        //                 }
        //             ],
        //             {cancelable: false}
        //         )
        //     }
        // }

        // if (resultEnvoieWalletToWallet !== null) {
        //     if (resultEnvoieWalletToWallet.response !== null) {
        //         Alert.alert(
        //             I18n.t("SUCCESS_TRANSFER"),
        //             resultEnvoieWalletToWallet.response,
        //             [
        //                 {
        //                     text: I18n.t("OK"), onPress: () => {
        //                         this.props.envoieUserWalletToWalletReset();
        //                         IlinkEmitter.emit("refreshWallet");
        //                         this.props.navigation.pop();
        //                     }
        //                 }

        //             ],
        //             {cancelable: false}
        //         )
        //     }
        // }
        if (errorEnvoieWalletToWallet !== null) {
            if (typeof errorEnvoieWalletToWallet.data !== 'undefined') {
                console.log('errorEnvoieWalletToWallet: ', errorEnvoieWalletToWallet)
                 Alert.alert(
                      I18n.t("WITHDRAWAL_ERROR"),
                      errorEnvoieWalletToWallet.data.error,
                      [
                           {
                                text: I18n.t("OK"), onPress: () => {
                                     this.props.envoieUserWalletToCardReset();
                                }
                           }
                      ],
                      
                      { cancelable: false }
                 )
            }
       }

       if (resultEnvoieWalletToWallet !== null) {
            if (resultEnvoieWalletToWallet.status === 301) {
                 this.props.envoieUserWalletToCardReset();
                 try{
                     this.props.navigation.push('webviewScreen', {
                         url: resultEnvoieWalletToWallet.response.payment_url,
                         requestBody: this.getRequestBody(),
                         transactionType: "USER_PAY_INSURANCE",
                         
                     });
                 } catch(error) {
                     console.log('error', error);
                 }
            }

            if (resultEnvoieWalletToWallet.status === 200) {
                 if (resultEnvoieWalletToWallet.response !== null) {
                      Alert.alert(
                           I18n.t("WITHDRAWAL_SUCCESS"),
                           resultEnvoieWalletToWallet.response,
                           [
                                {
                                     text: I18n.t("OK"), onPress: () => {
                                          this.props.envoieUserWalletToCardReset();
                                          IlinkEmitter.emit("refreshWallet");
                                          this.props.navigation.pop();
                                          navigation.goBack()
                                     }
                                }
  
                           ],
                           { cancelable: false }
                      )
                 }
            }
        }
    }
 

    getRequestBody () {
        return {
            //   type: 21,
            //   cvv: this.state.codeCVV,
            //   id_wallet_user: this.state.wallet.id,
            //   montant: this.state.montant,
            //   password: this.state.password
            type: 21,
            numero_carte: this.state.creditCardInput.values.number.replace(/\s/g, ''),
            cvv: this.state.creditCardInput.values.cvc,
            expiration_date: this.state.creditCardInput.values.expiry,
            id_wallet_user: this.state.wallet.id,
            montant: this.state.montant,
            password: this.state.password,
            type_id_destinataire : this.state.typeIdDestinataireSelect,
            final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
            id_destinataire: this.state.numeroTelephoneOrWalletCode,
            type_document_destinataire: this.state.identityPiecesName,
            prenom_destianataire: this.state.prenom_destianataire,
            id_document_destinataire: this.state.numeroIdentite,
            nom_destinataire: this.state.nomsDestinataire,
            prenom_destinataire: this.state.prenomsDestinataire,
            network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
            customer_surname: this.state.surnameCustomer,
            customer_address: this.state.adressCustomer,
            customer_city: this.state.cityCustomer,
            customer_country: (this.state.countryCustomer.filter(element => element.name === this.state.paysCarteSelect))[0].code_country,
            with_linked_card: false,
        }
    }
    

    renderDialogGetCommissionResponse = () => {

        const {errorEnvoieWalletToWalletGetCommission} = this.props;

        if (errorEnvoieWalletToWalletGetCommission !== null) {
            if (typeof errorEnvoieWalletToWalletGetCommission.data !== 'undefined') {
                Alert.alert(
                    I18n.t("ERROR_LABLE"),
                    errorEnvoieWalletToWalletGetCommission.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.getCommissionUserWalletToWalletReset();
                            }
                        }
                    ],
                    {cancelable: false}
                )
            }
        }

    }

    isCreditCardValid = () => {
     const { creditCardInput } = this.state;
     const errorMessage = [];

     if (typeof creditCardInput.status !== 'undefined') {

          if (creditCardInput.status.cvc === 'incomplete')
               errorMessage.push(I18n.t('CVC_CARD_ERROR') || secureTextEntry=='true');
          if (creditCardInput.status.expiry === 'incomplete')
               errorMessage.push(I18n.t('EXPIRY_CARD_ERROR'));
          if (creditCardInput.status.number === 'incomplete')
               errorMessage.push(I18n.t('CARD_NUMBER_ERROR'));
     }
     else
          errorMessage.push(I18n.t('THIS_FIELD_IS_REQUIRED'))

     return errorMessage;
}

onCreditCardChange = (form) => {
     this.setState({
          creditCardInput: form,
          displayCardError: false
     });
}

    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 (!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
            };
    }

    modalConfirmTransaction = (data) => {
        const commission = data.response.frais;
        const montant_net_final = data.response.montant_net_final;
        const montant_net_init = data.response.montant_net_init;
        const destinataire = data.response.destinataire;
        const exchange_rate = data.response.exchange_rate;

        console.log("DATA SEND TO CONFIRM DIALOG", data);
        return (

            <Dialog.Container useNativeDriver={true} visible={this.state.isModalConfirmVisible}>

                <Dialog.Title>{I18n.t('TRANSACTION_DETAIL')}</Dialog.Title>

                <View>

                    <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('DESTINATAIRE')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text style={[Typography.caption1, Color.grayColor]}>{destinataire}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(this.state.montant, ' ')} ${this.state.wallet.currency_code}`}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('FEES_AND_TAXES')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(commission, ' ')} ${this.state.wallet.currency_code}`}</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{paddingVertical: 10}}>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2, FontWeight.bold]}>{I18n.t('EXCHANGE_TAUX')}: </Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text style={[Typography.caption1, Color.grayColor]}>{exchange_rate}</Text>
                            </View>
                        </View>

                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2, FontWeight.bold]}>{I18n.t('NET_AMOUNT')}: </Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text style={[Typography.caption1, Color.grayColor]}></Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('INIT_COUNTRY')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant_net_init, ' ')} ${this.state.wallet.currency_code}`}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('FINAL_COUNTRY')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text style={[Typography.caption1, Color.grayColor]}>{montant_net_final}</Text>
                            </View>
                        </View>
                    </View>
                </View>

                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
                    this.setState({
                        isModalConfirmVisible: false
                    });
                }}/>
                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
                    this.setState({
                        isModalConfirmVisible: false,
                        isDataSubmit: true
                    });
                    
                    this.props.envoieUserWalletToWalletAction(this.getRequestBody());
                    //this.props.envoieUserWalletToCardAction(this.getRequestBody());
                    this.props.getCommissionUserWalletToWalletReset();
                }}
                />

            </Dialog.Container>

        );

    }

    onSubmitNextStep = () => {

     const {surnameCustomer, emailCustomer, adressCustomer,  cityCustomer, } = this.state;

     if (this.ckeckIfFieldIsOK(surnameCustomer))
     this.surnameCustomerAnim.shake(800);
     
//  else if (this.ckeckIfFieldIsOK( nameCustomer))
//      this. nameCustomerAnim.shake(800);
 else if (this.ckeckIfFieldIsOK(emailCustomer))
     this.emailCustomerAnim.shake(800);
     else if (this.ckeckIfFieldIsOK(adressCustomer))
     this.adressCustomerAnim.shake(800);
 else if (this.ckeckIfFieldIsOK(cityCustomer))
     this.cityCustomerAnim.shake(800);
    
     else {

         this.setState({
          triggerNextClick: true,
           modalVisible: true,
           hasLoadActiveCountryList: true,
           hasLoadActivePayCountryNetworkList: true,
           displayFirstStep: !this.state.displayFirstStep,
           displaySecondStep: !this.state.displaySecondSte
         }, () => {
          this.props.getActiveCountryAction();
          console.log("ENVOIE WALLET PROPS : ", this.props);
      });
 
     }
 }

   onSubmitSendWalletToWallet  = () => {
        const {
            // nomsDestinataire,
            // prenomsDestinataire,
            identityPiecesName,
            countryCustomer,
            paysDestinationSelect,
            paysCarteSelect,
            numeroIdentite,
            walletActifSelect,
            typeIdDestinataireSelect,
            numeroTelephoneOrWalletCode,
            creditCardInput,
            montant,
            password
        } = this.state;

            //  if (this.ckeckIfFieldIsOK(nomsDestinataire))
            // this.nomDestinataireAnim.shake(800);
            // else if (this.ckeckIfFieldIsOK(paysCarteSelect))
     //       this.countryCustomerAnim.shake(800);
        // else if (this.ckeckIfFieldIsOK(prenomsDestinataire))
        //     this.prenomsDestinataireAnim.shake(800);
             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 (!creditCardInput.valid)
            this.codeCVVAnim.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.props.getCommissionUserWalletToWalletAction({
                type: 21,
                network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
                id_wallet_user: this.state.wallet.id,
                final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
                id_destinataire: this.state.numeroTelephoneOrWalletCode,
                montant: this.state.montant,            
                customer_country: (this.state.countryCustomer.filter(element => element.name === this.state.paysCarteSelect))[0].code_country,

         
            });

        }
        this.setState({
          triggerSubmitClick: true,
         // isDataSubmit: false,
             
      })

    }

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

    render() {
        console.log("STATE", this.state);
        const {resultEnvoieWalletToWalletGetCommission} = this.props;
        const lastTwoWallets = this.state.walletActifs.slice(-2).map(wallet => wallet.name);
        const isLastTwoElementsSelected = lastTwoWallets.includes(this.state.walletActifSelect);
        return (
            <>
                {(this.state.modalVisible || this.props.loadingEnvoieWalletToWalletGetCommission || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
                {this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
                {this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
                {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
                {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
                {
                    (resultEnvoieWalletToWalletGetCommission !== null) &&
                    (typeof resultEnvoieWalletToWalletGetCommission.response !== 'undefined') &&
                    this.modalConfirmTransaction(resultEnvoieWalletToWalletGetCommission)
                }
                <ScrollView style={styles.container}>
                {this.state.displayFirstStep &&
                              <>
                               <Text style={styles.subbigtitle}>{I18n.t('WITHDRAWAL_CARD_ORDER_WALLET')} </Text>

                    <Animatable.View ref={(comp) => {
                            this.surnameCustomerAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'users'}
                                  label={`${I18n.t('SURNAME')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.surnameCustomer}
                                  onChangeText={(surnameCustomer) => {
                                      this.setState({surnameCustomer})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.nameCustomerAnim= comp
                            
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'user-circle-o'}
                                  label={`${I18n.t('PRENOM_CLIENT')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.nameCustomer}
                                  onChangeText={(nameCustomer) => {
                                      this.setState({nameCustomer})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>
                         <Animatable.View ref={(comp) => {
                            this.emailCustomerAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName='envelope'
                                  label={I18n.t('EMAIL')}
                                  iconColor={'#f95a25'}
                                  keyboardType='email-address'
                                  iconSize={20}
                                  value={this.state.emailCustomer}
                                  onChangeText={(emailCustomer) => {
                                      this.setState({emailCustomer})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.adressCustomerAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'map-marker'}
                                  label={`${I18n.t('ADDRESS')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.adressCustomer}
                                  onChangeText={(adressCustomer) => {
                                      this.setState({adressCustomer})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.cityCustomerAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'pie-chart'}
                                  label={`${I18n.t('CITY')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.cityCustomer}
                                  onChangeText={(cityCustomer) => {
                                      this.setState({cityCustomer})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                         <Animatable.View ref={(comp) => {
                            this.stateCustomerAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'university'}
                                  label={`${I18n.t('ETAT_STATE')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.stateCustomer}
                                  onChangeText={(stateCustomer) => {
                                      this.setState({stateCustomer})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>
                        <Animatable.View ref={(comp) => {
                            this.codeZipCustomerAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'file-zip-o'}
                                  label={`${I18n.t('ZIP_CODE')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.codeZipCustomer}
                                  onChangeText={(codeZipCustomer) => {
                                      this.setState({codeZipCustomer})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                  
               

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


               </>
                         }

                        {this.state.displaySecondStep &&
                         <>

<Text style={styles.subbigtitle}>{I18n.t('WITHDRAWAL_CARD_ORDER_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('CARD_COUNTRY')}
                                data={this.state.countryCustomer}
                                
                                useNativeDriver={true}
                                value={this.state.paysCarteSelect === null ? '' : this.state.paysCarteSelect}
                                onChangeText={(value, index, data) => {
                                    // this.props.getPayCountryNetworkReset();

                                    // let countrySelect = data.filter(element => element.name === value);
                                    // this.setState({
                                    //     paysCarteSelect: value,
                                    //     hasLoadActivePayCountryNetworkList: true,
                                    //     isDataSubmit: false
                                    // }, () => {
                                    //     this.props.getPayCountryNetworkAction({
                                    //         id_wallet_user: this.state.wallet.id,
                                    //         id_country: countrySelect[0].id
                                    //     });
                                    // });
                                    // this.props.getCommissionUserWalletToCashReset();
                                }}
                                
                            //     this.props.getPayCountryNetworkReset();

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

                    <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({
                                        id_wallet_user: this.state.wallet.id,
                                        id_country: countrySelect[0].id
                                    });
                                });
                                this.props.getCommissionUserWalletToWalletReset();
                            }}
                            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) => {
                                let activeWalletSelect = data.filter(element => element.name === value);
                                let typeIdentifiant = isIlinkWorldWallet(activeWalletSelect[0].type) ? I18n.t('CODE_WALLET') : I18n.t('PHONE');
                                this.setState({
                                    walletActifSelect: value,
                                    typeIdDestinataireSelect: typeIdentifiant
                                });

                            }}
                            valueExtractor={(value) => {
                                return value.name
                            }}
                            labelExtractor={(value) => {
                                return value.name
                            }}
                        />

                    </Animatable.View>

                    {isLastTwoElementsSelected && (
                    <>
                    <Animatable.View ref={(comp) => {
                            this.nomDestinataireAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
                                  label={`${I18n.t('NAME_DESTINATAIRE')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.nomsDestinataire}
                                  onChangeText={(nomsDestinataire) => {
                                      this.setState({nomsDestinataire})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.prenomsDestinataireAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'user-circle-o'}
                                  label={`${I18n.t('FIRSTNAME_DESTINATAIRE')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.prenomsDestinataire}
                                  onChangeText={(prenomsDestinataire) => {
                                      this.setState({prenomsDestinataire})
                                  }}
                                  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.value
                            }}
                            labelExtractor={(value) => {
                                return I18n.t(value.name)
                            }}

                        />
                
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        this.numeroTelephoneAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon}
                              iconName={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? 'phone' : 'lock'}
                              label={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? I18n.t('PHONE') : I18n.t('CODE_WALLET')}
                              iconColor={'#f95a25'}
                              keyboardType={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? 'phone-pad' : 'default'}
                              iconSize={20}
                              value={this.state.numeroTelephoneOrWalletCode}
                              onChangeText={(numeroTelephoneOrWalletCode) => {
                                  this.setState({numeroTelephoneOrWalletCode})
                              }}
                              style={styles.input}
                        >
                        </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.codeCVVAnim = comp }}>
                                        <View style={{
                                             overflow: 'hidden',
                                             paddingTop: 16,
                                             backgroundColor: 'white',
                                             marginTop: responsiveHeight(2),
                                             marginLeft: responsiveWidth(5),
                                             marginRight: responsiveWidth(5),
                                             borderRadius: 5,
                                        }}>
                                             <LiteCreditCardInput
                                                  inputStyle={{
                                                       flex: 1,
                                                       color: 'black',
                                                       fontSize: 18,
                                                       padding: 7,
                                                       paddingLeft: 0,
                                                  }}
                                                  validColor={this.state.creditCardInput.valid ? 'green' : ''}
                                                  invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
                                                  onChange={this.onCreditCardChange}
                                                  labels={{
                                                       number: I18n.t('CARD_NUMBER_LABEL'),
                                                       expiry: I18n.t('CARD_EXPIRY_LABEL'),
                                                       cvc: I18n.t('CARD_CVC_LABEL'),
                                                  }} />
                                             {
                                                  (this.state.displayCardError) &&
                                                  this.isCreditCardValid().map((item) => (
                                                       <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
                                                  ))
                                             }
                                        </View>
                                   </Animatable.View>

                                   <Animatable.View ref={(comp) => {
                        this.montantAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'money'}
                              label={I18n.t('AMOUNT')}
                              iconColor={'#f95a25'}
                              keyboardType='numeric'
                              iconSize={20}
                              value={this.state.montant}
                              onChangeText={(montant) => {
                                  this.setState({montant})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                        <View style={{
                            position: 'absolute',
                            left: responsiveWidth(82),
                            top: 35,
                            flexDirection: 'row'
                        }}>
                            <View
                                style={{
                                    width: 1,
                                    borderLeftColor: '#f0f0f0',
                                    height: 40,
                                    left: -8,
                                    top: -10,
                                    borderLeftWidth: 1,

                                }}
                            />
                            <Text style={[Typography.body1, FontWeight.bold]}>{this.state.wallet.currency_code}</Text>
                        </View>
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        this.passwordAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                              label={I18n.t('PASSWORD')}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              secureTextEntry={true}
                              value={this.state.password}
                              onChangeText={(password) => {
                                  this.setState({password})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>
                                
                                   {/* <Animatable.View ref={(comp) => { this.codeCVVAnim = comp }}>
                              <Fumi iconClass={FontAwesomeIcon} iconName={'credit-card'}
                                   label={I18n.t('CARD_CVC_LABEL')}
                                   iconColor={'#f95a25'}
                                   keyboardType='numeric'
                                   iconSize={20}
                                   value={this.state.codeCVV}
                                   onChangeText={(codeCVV) => {
                                        if (codeCVV.length > 3) {
                                             this.setState({ codeCVV: this.state.codeCVV.substring(0, 3) })
                                        }
                                        else
                                             this.setState({ codeCVV })
                                   }}
                                   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,

    loadingEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.loading,
    resultEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.result,
    errorEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.error,

    loadingEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.loading,
    resultEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.result,
    errorEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.error,
});

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

    getPayCountryNetworkAction,
    getPayCountryNetworkReset,

    getActiveCountryAction,
    getActiveCountryReset,

    envoieUserWalletToWalletAction,
    envoieUserWalletToWalletReset,

    getCommissionUserWalletToWalletAction,
    getCommissionUserWalletToWalletReset,


    envoieUserWalletToCardReset,
    envoieUserWalletToCardAction,

}, dispatch);

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

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,
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 1
    },
    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,
    }
});