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';
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 {readUser} from '../../../webservice/AuthApi';
import {
    getActiveCountryAction,
    getActiveCountryByDialCodeAction,
    getActiveCountryByDialCodeReset,
    getActiveCountryReset,
    getPayCountryNetworkAction,
    getPayCountryNetworkReset
} from '../../../webservice/CountryApi';
import {
    envoieUserWalletToWalletAction,
    envoieUserWalletToWalletReset,
    getCommissionUserWalletToWalletAction,
    getCommissionUserWalletToWalletReset
} 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 EnvoieWalletToWalletUser extends Component {
    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'
    };

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

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

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

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

    componentDidMount() {

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

    }

    componentWillReceiveProps(nextProps) {

        if (nextProps.resultEnvoieWalletToWalletGetCommission != null) {

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

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

    renderGetActionCountryList = () => {

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

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

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

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

                    ],
                    {cancelable: false}
                )
            }
        }
    }

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

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

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

                    ],
                    {cancelable: false}
                )
            }
        }
    }

    renderEnvoieWalletToWalletResponse = () => {

        const {resultEnvoieWalletToWallet, errorEnvoieWalletToWallet} = this.props;

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

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

                    ],
                    {cancelable: false}
                )
            }
        }
    }

    renderDialogGetCommissionResponse = () => {

        const {errorEnvoieWalletToWalletGetCommission} = this.props;

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

    }

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

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

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


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

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

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

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

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

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

                <View>

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

                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
                    this.setState({
                        isModalConfirmVisible: false
                    });
                }}/>
                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
                    this.setState({
                        isModalConfirmVisible: false,
                        isDataSubmit: true
                    });
                    this.props.envoieUserWalletToWalletAction({
                        type: 1,
                        id_wallet_user: this.state.wallet.id,
                        final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
                        id_destinataire: this.state.numeroTelephoneOrWalletCode,
                        type_document_destinataire: this.state.identityPiecesName,
                        id_document_destinataire: this.state.numeroIdentite,
                        network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
                        montant: this.state.montant,
                        password: this.state.password
                    });
                    this.props.getCommissionUserWalletToWalletReset();
                }}/>

            </Dialog.Container>

        );

    }

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

        if (this.ckeckIfFieldIsOK(identityPiecesName))
            this.identityPiecesAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(paysDestinationSelect))
            this.paysDestinationAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(walletActifSelect))
            this.walletActifAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(typeIdDestinataireSelect))
            this.typeIdDestinataireAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(numeroIdentite))
            this.numeroIdentiteAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(numeroTelephoneOrWalletCode))
            this.numeroTelephoneAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
            console.log("IS MONTANT VALID", this.isMontantValid())
            this.montantAnim.shake(800);
        } else if (this.ckeckIfFieldIsOK(password))
            this.passwordAnim.shake(800);
        else {

            this.props.getCommissionUserWalletToWalletAction({
                type: 1,
                network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
                id_wallet_user: this.state.wallet.id,
                final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
                id_destinataire: this.state.numeroTelephoneOrWalletCode,
                montant: this.state.montant,
            });

        }
        this.setState({
            triggerSubmitClick: true
        })

    }

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

    render() {
        console.log("STATE", this.state);
        const {resultEnvoieWalletToWalletGetCommission} = this.props;
        return (
            <>
                {(this.state.modalVisible || this.props.loadingEnvoieWalletToWalletGetCommission || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
                {this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
                {this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
                {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
                {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
                {
                    (resultEnvoieWalletToWalletGetCommission !== null) &&
                    (typeof resultEnvoieWalletToWalletGetCommission.response !== 'undefined') &&
                    this.modalConfirmTransaction(resultEnvoieWalletToWalletGetCommission)
                }
                <ScrollView style={styles.container}>

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

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

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

                    <Animatable.View ref={(comp) => {
                        this.walletActifAnim = comp
                    }}
                                     style={{
                                         width: responsiveWidth(90),
                                         height: 60,
                                         marginTop: 20,
                                         alignSelf: 'center',
                                         borderRadius: 10,
                                         paddingLeft: 20,
                                         paddingRight: 20,
                                         backgroundColor: 'white'
                                     }}>
                        <Dropdown
                            label={I18n.t('ACTIVE_WALLET')}
                            data={this.state.walletActifs}
                            useNativeDriver={true}
                            value={isNil(this.state.walletActifSelect) ? '' : this.state.walletActifSelect}
                            onChangeText={(value, index, data) => {
                                let activeWalletSelect = data.filter(element => element.name === value);
                                let typeIdentifiant = isIlinkWorldWallet(activeWalletSelect[0].type) ? I18n.t('CODE_WALLET') : I18n.t('PHONE');
                                this.setState({
                                    walletActifSelect: value,
                                    typeIdDestinataireSelect: typeIdentifiant
                                });

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

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

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

                    <Animatable.View ref={(comp) => {
                        this.identityPiecesAnim = comp
                    }}
                                     style={{
                                         width: responsiveWidth(90),
                                         height: 60,
                                         marginTop: 20,
                                         alignSelf: 'center',
                                         borderRadius: 10,
                                         paddingLeft: 20,
                                         paddingRight: 20,
                                         backgroundColor: 'white'
                                     }}>
                        <Dropdown
                            label={I18n.t('PIECE_IDENTITE')}
                            data={this.state.identityPieces}
                            useNativeDriver={true}
                            value={this.state.identityPiecesName}
                            onChangeText={(value, index, data) => {
                                this.setState({identityPiecesName: value});
                            }}
                            valueExtractor={(value) => {
                                return I18n.t(value.name)
                            }}
                            labelExtractor={(value) => {
                                return I18n.t(value.name)
                            }}
                        />
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        this.numeroIdentiteAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'address-card'}
                              label={`${I18n.t('NUMERO_IDENTITE')}`}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              onChangeText={(numeroIdentite) => {
                                  this.setState({numeroIdentite})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        this.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.onSubmitSendWalletToWallet()
                            }}>
                        {I18n.t('SUBMIT_LABEL')}</Button>
                </ScrollView>
            </>
        )
    }
}

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

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

    loadingPayCountryNetwork: state.payCountryNetworkReducer.loading,
    resultPayCountryNetwork: state.payCountryNetworkReducer.result,
    errorPayCountryNetwork: state.payCountryNetworkReducer.error,

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

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

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

    getPayCountryNetworkAction,
    getPayCountryNetworkReset,

    getActiveCountryAction,
    getActiveCountryReset,

    envoieUserWalletToWalletAction,
    envoieUserWalletToWalletReset,

    getCommissionUserWalletToWalletAction,
    getCommissionUserWalletToWalletReset

}, dispatch);

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.primaryDarkColor,
    },
    textbtnvalide: {
        color: 'white',
        fontWeight: 'bold'
    },
    bigtitle: {
        color: 'white',
        fontSize: 20,
        flex: 1,
        fontWeight: 'bold',
        textAlign: 'center',
        margin: 20,
    },
    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,
    }
});