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, FlatList } from 'react-native';
import * as Animatable from 'react-native-animatable';
import Dialog from "react-native-dialog";
import I18n from 'react-native-i18n';
import {Dropdown} from 'react-native-material-dropdown-v2';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { ProgressDialog } from 'react-native-simple-dialogs';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Fumi } from 'react-native-textinput-effects';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import thousands from 'thousands';
import { Color } from '../../../config/Color';
import { FontWeight, Typography } from '../../../config/typography';
import { store } from "../../../redux/store";
import { IlinkEmitter } from '../../../utils/events';
import { LiteCreditCardInput } from "react-native-credit-card-input";
import { readUser } from '../../../webservice/AuthApi';
import {
     getActiveCountryAction,
     getActiveCountryReset,
     getOtherPayCountryNetworkAction,
    getPayCountryNetworkReset,
 } from '../../../webservice/CountryApi';
import { envoieUserWalletToCardAction, envoieUserWalletToCardReset, getCommissionUserWalletToCardAction, getCommissionUserWalletToCardReset } from '../../../webservice/EnvoieUserApi';
import { isNormalInteger } from '../../../utils/UtilsFunction';
let theme = require('../../../utils/theme.json');
let route = require('../../../route.json');

class RetraitCarteVersCashAgent extends Component {

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

     };

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

     constructor(props) {
          super(props);
          this.state = {
               countryCustomer: [],
               paysDestination: [],
               paysDestinationSelect: null,
               hasLoadActivePayCountryNetworkList: false,
               montant: null,
               password: null,
               montant: '',
               numeroSerie: '',
               numCarte: 0,
               cvv: 0,
               expiration_date: '',
               creditCardInput: {},
               displayCardError: false,
               loading: false,
               user: null,
               displayFirstStep: true,
               displaySecondStep: false,
               displayTercerStep: false,
               triggerSubmitClick: false,
               isSubmitClick: false,
               isDataSubmit: false,
               isModalConfirmVisible: false,
               hasLoadActiveCountryList: false,
               triggerNextClick: false,
               modalVisible: false,
               wallet: store.getState().walletDetailReducer.result.response
          };
          this.props.getActiveCountryReset();
          this.props.envoieUserWalletToCardReset();
          this.props.getCommissionUserWalletToCardReset();

     }

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

     }

     componentWillReceiveProps(nextProps) {

          console.log('PROPS', nextProps)

          if (nextProps.resultEnvoieWalletToCardGetCommission != null) {

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

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

     renderGetActionCountryList = () => {

          const {resultActiveCountryList, errorActiveCountryList} = this.props;
          if (resultActiveCountryList !== null) {
             // if (typeof resultActiveCountryList !== "undefined" ) {
  
                  this.setState({
                      hasLoadActiveCountryList: false,
                      countryCustomer: resultActiveCountryList.response,
                      paysDestinationSelect: resultActiveCountryList.response[0].name,
                  });
                  if (this.state.hasLoadActivePayCountryNetworkList)
                      this.props.getOtherPayCountryNetworkAction({
                          id_wallet_agent: 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}
                  )
              }
          }
      }

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

     renderEnvoieWalletToWalletResponse = () => {

          const { resultEnvoieWalletToCard, errorEnvoieWalletToCard } = this.props;

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

          if (resultEnvoieWalletToCard !== null) {
               if (resultEnvoieWalletToCard.status === 301) {
                    console.warn('jehfekjfhejkf', resultEnvoieWalletToCard.response.payment_url)
                    //this.props.envoieUserWalletToCardReset();
                    try{
                       console.warn('jehfekjfhejkf', resultEnvoieWalletToCard.response.payment_url)
                        this.props.navigation.push('webviewScreen', {
                            url: resultEnvoieWalletToCard.response.payment_url,
                            requestBody: {
                              type: 13,
               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_agent: this.state.wallet.id,
               montant: this.state.montant,
               password: this.state.password,
               customer_email: this.state.emailCustomer,
               customer_name: this.state.nameCustomer,
               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.paysDestinationSelect))[0].code_country,
               customer_state: this.state.stateCustomer,
               customer_zip_code: this.state.codeZipCustomer,
                            },
                            transactionType: "USER_CARD_WALLET", 
                            
                        });
                    } catch(error) {
                        console.log('error', error);
                    }
               } 
               if (resultEnvoieWalletToCard.status === 200) {
                    console.log("bonjour...response: ", resultEnvoieWalletToCard.response)
                     if (resultEnvoieWalletToCard.response !== null) {
                          Alert.alert(
                               I18n.t("WITHDRAWAL_SUCCESS"),
                               resultEnvoieWalletToCard.data.response,
                               [
                                    {
                                         text: I18n.t("OK"), onPress: () => {
                                              this.props.envoieUserWalletToCardReset();
                                              IlinkEmitter.emit("refreshWallet");
                                              this.props.navigation.pop();
                                              //navigation.goBack()
                                         }
                                    }
      
                               ],
                               { cancelable: false }
                          )
                     }
                }

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

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

     

     renderDialogGetCommissionResponse = () => {

          const { errorEnvoieWalletToCardGetCommission } = this.props;

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

     }

     updateLangue() {
          this.props.navigation.setParams({ name: I18n.t('WITHDRAWAL_WALLET_TO_CASH') })
          this.forceUpdate()
     }

     modalConfirmTransaction = (data) => {

          const frais = data.response.frais;
          const montant_net = data.response.montant_net;

          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('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(frais, ' ')} ${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('NET_AMOUNT')}:</Text>
                                   </View>
                                   <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                        <Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant_net, ' ')} ${this.state.wallet.currency_code}`}</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({
                              isDataSubmit: true,
                              isModalConfirmVisible: false,
                              
                         });
                         this.props.envoieUserWalletToCardAction({
                              type: 13,
               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_agent: this.state.wallet.id,
               montant: this.state.montant,
               password: this.state.password,
               customer_email: this.state.emailCustomer,
               customer_name: this.state.nameCustomer,
               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.paysDestinationSelect))[0].code_country,
               customer_state: this.state.stateCustomer,
               customer_zip_code: this.state.codeZipCustomer,
                         });
                         this.props.getCommissionUserWalletToCardReset();
                    }} />

               </Dialog.Container>

          );

     }

     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
               return {
                    errorMessage: '',
                    isValid: true
               };
     }
     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);
           });
      
          }
      }

     onSubmitSendWalletToCard = () => {
     const { creditCardInput, montant, password } = this.state;
     //  if (this.ckeckIfFieldIsOK(countryCustomer))
     //       this.countryCustomerAnim.shake(800);
    // else 
     // if (this.ckeckIfFieldIsOK(stateCustomer))
     //       this.stateCustomerAnim.shake(800);
          // else if (this.ckeckIfFieldIsOK(codeZipCustomer))
          // this.codeZipCustomerAnim.shake(800);
     
          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.getCommissionUserWalletToCardAction({
                         type: 13,
                         id_wallet_agent: this.state.wallet.id,
                         montant: this.state.montant,
                    });

          }
          
       
          this.setState({
               triggerSubmitClick: true,
               isDataSubmit: false
               
               // triggerSubmitClick: true,
               // hasLoadActiveCountryList: true,
               // hasLoadActivePayCountryNetworkList: true,
               // numCarte: parseInt((creditCardInput.values.number).replace(/ /g, ' ')),
               // cvv: creditCardInput.values.cvc,
               // expiration_date: creditCardInput.values.expiry,
               // final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
          });
         
     }


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

     render() {
          const { resultEnvoieWalletToCardGetCommission } = this.props;
          return (
               <>
                    {(this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission) || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode && this.renderLoader()}
                    {this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
                    {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
                    {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
                    {
                         (resultEnvoieWalletToCardGetCommission !== null) &&
                         (typeof resultEnvoieWalletToCardGetCommission.response !== 'undefined') &&
                         this.modalConfirmTransaction(resultEnvoieWalletToCardGetCommission)
                    }
                    <ScrollView style={styles.container}>

                         {this.state.displayFirstStep &&
                              <>

                                   <Text style={styles.subbigtitle}>{I18n.t('WITHDRAWAL_CARD_TO_CASH_DESCRIPTION_AGENT')}</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>

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

                        {this.state.displaySecondStep &&
                         <>
                        <Animatable.View ref={(comp) => {
                            this.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.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,
                                   //      isDataSubmit: false
                                   //  }, () => {
                                   //      this.props.getOtherPayCountryNetworkAction({
                                   //          id_wallet_agent: this.state.wallet.id,
                                   //          id_country: countrySelect[0].id
                                   //      });
                                   //  });
                                   //  this.props.getCommissionUserWalletToCashReset();
                                }}
                                
                                valueExtractor={(value) => {
                                    return value.name
                                }}
                                labelExtractor={(value) => {
                                    return value.name
                                }}
                                
                            />
                            
                        </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>

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

                                   {/* <Button style={styles.btnvalide}
                                        textStyle={styles.textbtnvalide}
                                        isLoading={this.state.isLoging}
                                        onPress={() => {

                                             if (!this.state.creditCardInput.valid)
                                                  this.codeCVVAnim.shake(800);
                                             else {
                                                  this.setState({
                                                       displayFirstStep: !this.state.displayFirstStep,
                                                       displaySecondStep: !this.state.displaySecondStep,
                                                       displayTercerStep: !this.state.displayTercerStep,
                                                  }, () => {
                                                       this.props.getActiveCountryAction();
                                                       console.log("ENVOIE WALLET PROPS", this.props);
                                                   });
                                             }
                                        }}>
                                        {I18n.t('NEXT')}</Button> */}
                           
                              
                                   <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>

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

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

const maptStateToProps = state => ({

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

     loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
     resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
     errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,

     loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
     resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
     errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({

     envoieUserWalletToCardAction,
     envoieUserWalletToCardReset,

     getOtherPayCountryNetworkAction,
    getPayCountryNetworkReset,

     getActiveCountryAction,
     getActiveCountryReset,

     getCommissionUserWalletToCardAction,
     getCommissionUserWalletToCardReset

}, dispatch);

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

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