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, isNormalInteger} from '../../../utils/UtilsFunction';
import {readUser} from '../../../webservice/AuthApi';
import {
    getActiveCountryAction,
    getActiveCountryByDialCodeAction,
    getActiveCountryByDialCodeReset,
    getActiveCountryReset,
    getOtherPayCountryNetworkAction,
    getPayCountryNetworkReset
} from '../../../webservice/CountryApi';
import {
    envoieUserWalletToCashAction,
    envoieUserWalletToCashReset,
    getCommissionUserWalletToCashAction,
    getCommissionUserWalletToCashReset
} 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 EnvoieCashVersAutreWalletAgent extends Component {
    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'

    };

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

    constructor(props) {
        super(props);
        this.state = {
            identityPiecesEmetteur: identityPieces(),
            identityPiecesNameEmetteur: I18n.t((identityPieces()[0]).name),
            paysDestination: [],
            paysDestinationSelect: null,
            walletActifs: [],
            walletActifSelect: null,
            nomsEmetteur: null,
            prenomsEmetteur: null,
            emailEmetteur: null,
            numeroIdentiteEmetteur: null,
            nomsDestinataire: null,
            prenomsDestinataire: null,
            idDestinataire: null,
            numeroIdentiteDestinataire: null,
            montant: null,
            password: null,
            loading: false,
            user: null,
            triggerNextClick: false,
            displayFirstStep: true,
            displaySecondStep: false,
            modalVisible: false,
            hasLoadActiveCountryList: false,
            hasLoadActivePayCountryNetworkList: false,
            triggerSubmitClick: false,
            isDataSubmit: false,
            isModalConfirmVisible: false,
            wallet: store.getState().walletDetailReducer.result.response
        };

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

    }

    componentDidMount() {

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

    }

    componentWillReceiveProps(nextProps) {

        if (nextProps.resultEnvoieWalletToCashGetCommission != null) {

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

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

    renderGetActionCountryList = () => {

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

                this.setState({
                    hasLoadActiveCountryList: false,
                    paysDestination: 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}
                )
            }
        }
    }

    renderGetPayCountryNetworkResponse = () => {
        const {resultPayCountryNetwork, errorPayCountryNetwork} = this.props;
        if (resultPayCountryNetwork !== null) {
            if (typeof resultPayCountryNetwork.response !== 'undefined') {
                if (resultPayCountryNetwork.response.length > 0) {
                    this.setState({
                        hasLoadActivePayCountryNetworkList: false,
                        walletActifs: resultPayCountryNetwork.response,
                        walletActifSelect: resultPayCountryNetwork.response[0].name,
                        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 {resultEnvoieWalletToCash, errorEnvoieWalletToCash} = this.props;

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

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

                    ],
                    {cancelable: false}
                )
            }
        }
    }

    renderDialogGetCommissionResponse = () => {

        const {errorEnvoieWalletToCashGetCommission} = this.props;

        if (errorEnvoieWalletToCashGetCommission !== null) {
            if (typeof errorEnvoieWalletToCashGetCommission.data !== 'undefined') {
                Alert.alert(
                    I18n.t("ERROR_LABLE"),
                    errorEnvoieWalletToCashGetCommission.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.getCommissionUserWalletToCashReset();
                            }
                        }
                    ],
                    {cancelable: 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 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('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={{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]}>{`${thousands(montant_net_final, ' ')}`}</Text>
                                </View>
                            </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.envoieUserWalletToCashAction({
                        type: 15,
                        id_wallet_agent: this.state.wallet.id,
                        nom_emetteur: this.state.nomsEmetteur,
                        prenom_emetteur: this.state.prenomsDestinataire,
                        email_emetteur: this.state.emailEmetteur,
                        type_document_emetteur: this.state.identityPiecesNameEmetteur,
                        id_document_emetteur: this.state.numeroIdentiteEmetteur,
                        final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
                        id_destinataire: this.state.numeroIdentiteDestinataire,
                        type_document_destinataire: this.state.identityPiecesNameEmetteur,
                        nom_destinataire: this.state.nomsDestinataire,
                        prenom_destinataire: this.state.prenomsDestinataire,
                        id_document_destinataire: this.state.numeroIdentiteDestinataire,
                        network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
                        montant: this.state.montant,
                        password: this.state.password
                    });
                    this.props.getCommissionUserWalletToCashReset();
                }}/>

            </Dialog.Container>

        );

    }

    onSubmitNextStep = () => {

        const {nomsEmetteur, prenomsEmetteur, emailEmetteur, numeroIdentiteEmetteur} = this.state;

        if (this.ckeckIfFieldIsOK(nomsEmetteur))
            this.nomsEmetteurAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(prenomsEmetteur))
            this.prenomsEmetteurAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(emailEmetteur))
            this.emailEmetteurAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(numeroIdentiteEmetteur))
            this.numeroIdentiteEmetteurAnim.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);
            });
        }
    }

    onSubmitCashVersAutreWallet = () => {
        const {nomsDestinataire, prenomsDestinataire, montant, password, numeroIdentiteDestinataire} = this.state;

        if (this.ckeckIfFieldIsOK(nomsDestinataire))
            this.nomDestinataireAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(prenomsDestinataire))
            this.prenomsDestinataireAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(numeroIdentiteDestinataire))
            this.identityPiecesDestinataireAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
            console.log("IS MONTANT VALID", this.isMontantValid())
            this.montantAnim.shake(800);
        } else if (this.ckeckIfFieldIsOK(password))
            this.passwordAnim.shake(800);
        else {

            this.props.getCommissionUserWalletToCashAction({
                type: 15,
                id_wallet_agent: this.state.wallet.id,
                final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
                montant: this.state.montant,
            });

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

    }

    // renderLoader = () => {
    //     return (
    //         <ProgressDialog
    //             visible={this.state.modalVisible || this.props.loadingEnvoieWalletToCashGetCommission || this.props.loadingEnvoieWalletToCash || 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 {resultEnvoieWalletToCashGetCommission} = this.props;
        return (
            <>
                {(this.state.modalVisible || this.props.loadingEnvoieWalletToCashGetCommission || this.props.loadingEnvoieWalletToCash || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode)}
                {this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
                {this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
                {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
                {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
                {
                    (resultEnvoieWalletToCashGetCommission !== null) &&
                    (typeof resultEnvoieWalletToCashGetCommission.response !== 'undefined') &&
                    this.modalConfirmTransaction(resultEnvoieWalletToCashGetCommission)
                }
                <ScrollView style={styles.container}>

                    {this.state.displayFirstStep &&
                    <>

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

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

                        <Animatable.View ref={(comp) => {
                            this.prenomsEmetteurAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'user-circle-o'}
                                  label={`${I18n.t('FIRSTNAME_EMETTEUR')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.prenomsEmetteur}
                                  onChangeText={(prenomsEmetteur) => {
                                      this.setState({prenomsEmetteur})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.emailEmetteurAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName='envelope'
                                  label={I18n.t('EMAIL_EMETTEUR')}
                                  iconColor={'#f95a25'}
                                  keyboardType='email-address'
                                  iconSize={20}
                                  value={this.state.emailEmetteur}
                                  onChangeText={(emailEmetteur) => {
                                      this.setState({emailEmetteur})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.identityPiecesEmetteurAnim = 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.identityPiecesEmetteur}
                                useNativeDriver={true}
                                value={this.state.identityPiecesNameEmetteur}
                                onChangeText={(value, index, data) => {
                                    this.setState({identityPiecesNameEmetteur: value, isDataSubmit: false});
                                }}
                                valueExtractor={(value) => {
                                    return I18n.t(value.name)
                                }}
                                labelExtractor={(value) => {
                                    return I18n.t(value.name)
                                }}
                            />
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.numeroIdentiteEmetteurAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'address-card'}
                                  label={`${I18n.t('NUMERO_IDENTITE_EMETTEUR')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  onChangeText={(numeroIdentiteEmetteur) => {
                                      this.setState({numeroIdentiteEmetteur})
                                  }}
                                  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.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.identityPiecesDestinataireAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon} iconName={'user-circle-o'}
                                  label={`${I18n.t('ID_DESTINATAIRE')}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  value={this.state.numeroIdentiteDestinataire}
                                  onChangeText={(numeroIdentiteDestinataire) => {
                                      this.setState({numeroIdentiteDestinataire})
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Animatable.View ref={(comp) => {
                            this.paysDestinationAnim = comp
                            console.log("pays destinantaire ! !:", this.state.paysDestination )
                        }}
                                         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,
                                    //     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.walletActifAnim = comp
                        }}
                                         style={{
                                             width: responsiveWidth(90),
                                             height: 60,
                                             marginTop: 20,
                                             alignSelf: 'center',
                                             borderRadius: 10,
                                             paddingLeft: 20,
                                             paddingRight: 20,
                                             backgroundColor: 'white'
                                         }}>
                            <Dropdown
                                label={I18n.t('ACTIVE_WALLET')}
                                data={this.state.walletActifs}
                                useNativeDriver={true}
                                value={isNil(this.state.walletActifSelect) ? '' : this.state.walletActifSelect}
                                onChangeText={(value, index, data) => {
                                    this.setState({
                                        isDataSubmit: false,
                                        walletActifSelect: value
                                    });

                                }}
                                valueExtractor={(value) => {
                                    return value.name
                                }}
                                labelExtractor={(value) => {
                                    return value.name
                                }}
                            />
                        </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>
                        <Button style={styles.btnvalide}
                                textStyle={styles.textbtnvalide}
                                isLoading={this.state.isLoging}
                                onPress={() => {
                                    this.onSubmitCashVersAutreWallet()
                                }}>
                            {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,

    loadingEnvoieWalletToCash: state.envoieUserWalletToCashReducer.loading,
    resultEnvoieWalletToCash: state.envoieUserWalletToCashReducer.result,
    errorEnvoieWalletToCash: state.envoieUserWalletToCashReducer.error,

    loadingEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.loading,
    resultEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.result,
    errorEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.error,
});

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

    getOtherPayCountryNetworkAction,
    getPayCountryNetworkReset,

    getActiveCountryAction,
    getActiveCountryReset,

    envoieUserWalletToCashAction,
    envoieUserWalletToCashReset,

    getCommissionUserWalletToCashAction,
    getCommissionUserWalletToCashReset

}, dispatch);

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

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