/* eslint-disable no-shadow */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable no-undef */
/* eslint-disable prettier/prettier */
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,
  KeyboardAvoidingView,
} 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 {
  selectActivatePaySubscription,
  selectSubscriptionList,
} from '../../../redux/insurance/insurance.selector';
import {readUser} from '../../../webservice/AuthApi';
import {
  getActiveCountryAction,
  getActiveCountryByDialCodeAction,
  getActiveCountryByDialCodeReset,
  getActiveCountryReset,
  getPayCountryNetworkAction,
  getPayCountryNetworkReset,
} from '../../../webservice/CountryApi';

import {ScreenComponent} from '../../../components/ScreenComponent';
import {FontWeight, Typography} from '../../../config/typography';
import thousands from 'thousands';
import {IlinkEmitter} from '../../../utils/events';
import {
  fetchGetSubscriptionListPending,
  fetchGetSubscriptionListReset,
  fetchActivePaySubscriptionReset,
  fetchActivePaySubscription,
  fetchGetSubscriptionList,
} from '../../../redux/insurance/insurance.actions';
let theme = require('../../../utils/theme.json');
let route = require('../../../route.json');
import SelectAssurance from './selectAssurance';
import {log} from 'react-native-reanimated';
import {element} from 'prop-types';

class AutreCarteN 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 = {
      paysDestination: [],
      countryCustomer: [],
      subscriptionListTemp: [],
      paysCarteSelect: null,
      subscriptions: [],
      assuranceCarteSelect: null,
      subscription: null,
      amount: null,
      password: null,
      isIlinkWorldWalletSelect: false,
      loading: false,
      numeroSerie: '',
      numCarte: 0,
      cvv: 0,
      codeCVV: null,
      expiration_date: '',
      creditCardInput: {},
      user: null,

      hasLoadActiveCountryList: false,
      hasLoadActivePayCountryNetworkList: false,
      isDataSubmit: false,
      isModalConfirmVisible: false,
      wallet: store.getState().walletDetailReducer.result.response,
      with_linked_card: false,
      displayFirstStep: true,
      displaySecondStep: false,
      subscriptionsSelect: null,
    };
    //4066082009294100
    //this.dropDownAlertRef = React.createRef();
    this.subscriptionRef = React.createRef();
    this.props.fetchActivePaySubscriptionReset();
    this.props.getActiveCountryReset();
    this.props.getActiveCountryByDialCodeReset();
    this.props.getPayCountryNetworkReset();

    this.props.getActiveCountryAction();
    console.log('ENVOIE WALLET PROPS', this.props);
  }
  // componentDidMount() {
  //     readUser().then((user) => {
  //         this.setState({ user });
  //     });
  //     // this.props.fetchGetSubscriptionListReset();
  //     // this.props.fetchActivePaySubscriptionReset();
  // }

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

  setSubscriptions(newSubscriptions) {
    this.setState({subscriptions: newSubscriptions});
  }

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

      this.setState({
        hasLoadActiveCountryList: false,
        countryCustomer: resultActiveCountryList.response,
        paysDestination: resultActiveCountryList.response,
        paysCarteSelect: resultActiveCountryList.response[0].name,
        assuranceCarteSelect: subscriptionList.response,
      });
      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,
            ),
          });
        } else if (resultPayCountryNetwork.response.length === 0) {
          this.setState({
            walletActifs: [],
            walletActifSelect: '',
            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 {resultActivatePaySubscription, errorActivatePaySubscription} =
      this.props;
    if (resultActivatePaySubscription !== null) {
      if (resultActivatePaySubscription.status === 301) {
        this.props.fetchActivePaySubscriptionReset();
        try {
          this.props.navigation.push('webviewScreen', {
            url: resultActivatePaySubscription.response.payment_url,
            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,
            amount: this.state.amount,
            password: this.state.password,
            type_document_destinataire: this.state.identityPiecesName,
            id_document_destinataire: this.state.numeroIdentite,
            nom_destinataire: this.state.nomsDestinataire,
            prenom_destinataire: this.state.prenomsDestinataire,
            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,
            payment_method: 'CARD',
            transactionType: "USER_PAY_INSURANCE",
          });
        } catch (error) {
          console.log('error', error);
        }
      }

      if (resultActivatePaySubscription.status === 200) {
       // if (resultActivatePaySubscription.response !== null) {
          Alert.alert(
            I18n.t('WITHDRAWAL_SUCCESS'),
            resultActivatePaySubscription.response,
            [
              {
                text: I18n.t('OK'),
                onPress: () => {
                  this.props.fetchActivePaySubscriptionReset();
                  IlinkEmitter.emit('refreshWallet');
                  this.props.navigation.pop();
                  navigation.goBack()
                },
              },
            ],
            {cancelable: false},
          );
        //}
      }
    }
    if (errorActivatePaySubscription !== null) {
      if (typeof errorActivatePaySubscription.data !== 'undefined') {
        Alert.alert(
          I18n.t('WITHDRAWAL_ERROR'),
          errorActivatePaySubscription.data.error,
          [
            {
              text: I18n.t('OK'),
              onPress: () => {
                this.props.fetchActivePaySubscriptionReset();
              },
            },
          ],

          {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 {amount} = this.state;
    if (parseInt(isEqual(amount, 0)) || amount < 0) {
      return {
        errorMessage: I18n.t('ENTER_AMOUNT_SUPERIOR_ZEROR'),
        isValid: false,
      };
    } else if (!isNormalInteger(amount)) {
      return {
        errorMessage: I18n.t('ENTER_VALID_AMOUNT'),
        isValid: false,
      };
    } else if (amount > parseInt(this.state.comptePrincipal)) {
      return {
        errorMessage: I18n.t('AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT'),
        isValid: false,
      };
    } else {
      return {
        errorMessage: '',
        isValid: true,
      };
    }
  };

  onSubmitNextStep = () => {
    const {
      assuranceCarteSelect,
      surnameCustomer,
      adressCustomer,
      cityCustomer,
    } = this.state;

    //  if (this.ckeckIfFieldIsOK(assuranceCarteSelect))
    //  this.subscriptionRAnim.shake(800);
    if (this.ckeckIfFieldIsOK(surnameCustomer)) {
      this.surnameCustomerAnim.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,
          hasLoadActiveCountryList: true,
          hasLoadActivePayCountryNetworkList: true,
          displayFirstStep: !this.state.displayFirstStep,
          displaySecondStep: !this.state.displaySecondSte,
        },
        () => {
          this.props.getActiveCountryAction();
          console.log('ENVOIE WALLET PROPS : ', this.props);
        },
      );
    }
  };

  onSubmitSendWalletToWallet = () => {
    const {creditCardInput, amount, password, subscription} = this.state;

    if (!creditCardInput.valid) {
      this.codeCVVAnim.shake(800);
    } else if (
      this.ckeckIfFieldIsOK(amount) ||
      !this.isMontantValid().isValid
    ) {
      this.montantAnim.shake(800);
    } else if (this.ckeckIfFieldIsOK(password)) {
      this.passwordAnim.shake(800);
    } else {
      this.props.fetchActivePaySubscription(subscription.id, {
        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,
        amount: this.state.amount,
        password: this.state.password,
        type_document_destinataire: this.state.identityPiecesName,
        id_document_destinataire: this.state.numeroIdentite,
        nom_destinataire: this.state.nomsDestinataire,
        prenom_destinataire: this.state.prenomsDestinataire,
        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,
        payment_method: 'CARD',
      });
    }

    this.setState({isDataSubmit: true});
    console.log('isDataSubmit :', this.state.isDataSubmit);
  };
  renderLoader = () => {
    return (
      <ProgressDialog
        visible={
          this.props.loadingCountryByDialCode ||
          this.props.loadingActiveCountryList ||
          this.props.loadingCountryByDialCode ||
          this.props.loadingActivatePaySubscription
        }
        title={I18n.t('LOADING')}
        message={I18n.t('LOADING_INFO')}
      />
    );
  };
  handleSelectedSubscription = selectedSubscription => {
    console.log('Subscription sélectionnée :', selectedSubscription);
    this.setState({subscription: selectedSubscription});
  };

  render() {
    console.log('STATE', this.state);

    return (
      <>
        {(this.props.loadingCountryByDialCode ||
          this.props.loadingActiveCountryList ||
          this.props.loadingActivatePaySubscription) &&
          this.renderLoader()}
        {this.state.hasLoadActiveCountryList &&
          this.renderGetActionCountryList()}
        {this.state.hasLoadActivePayCountryNetworkList &&
          this.renderGetPayCountryNetworkResponse()}
        {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}

        <ScrollView style={styles.container}>
          {this.state.displayFirstStep && (
            <>
              <Text style={styles.subbigtitle}>
                {I18n.t('WITHDRAWAL_CARD_ORDER_WALLET')}{' '}
              </Text>

              <SelectAssurance
                onSelectSubscription={this.handleSelectedSubscription}
              />

              <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}
                />
              </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}
                />
              </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}
                />
              </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}
                />
              </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}
                />
              </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,
                       
                    })
                  }}
             
                  valueExtractor={value => {
                    return value.name;
                  }}
                  labelExtractor={value => {
                    return value.name;
                  }}
                />
              </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.amount}
                  onChangeText={amount => {
                    this.setState({amount});
                  }}
                  style={styles.input}
                />
                <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> */}
                                   <Text style={[Typography.body1, FontWeight.bold]}>{this.state.countryCustomer.filter(element => element.name === this.state.paysCarteSelect)[0]?.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}
                />
              </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,

  resultActivatePaySubscription: state.activatePaySubscription.result,
  errorActivatePaySubscription: state.activatePaySubscription.error,
  loadingActivatePaySubscription: state.activatePaySubscription.loading,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      subscriptionList: selectSubscriptionList,
      activatePaySubscription: selectActivatePaySubscription,

      fetchGetSubscriptionListPending,
      fetchGetSubscriptionListReset,
      fetchActivePaySubscriptionReset,

      fetchActivePaySubscription,
      fetchGetSubscriptionList,

      getActiveCountryByDialCodeAction,
      getActiveCountryByDialCodeReset,

      getPayCountryNetworkAction,
      getPayCountryNetworkReset,

      getActiveCountryAction,
      getActiveCountryReset,
    },
    dispatch,
  );

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

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