import isEqual from 'lodash/isEqual';
import omit from 'lodash/omit';
import 'moment/locale/en-au';
import 'moment/locale/en-ca';
import 'moment/locale/en-gb';
import 'moment/locale/en-ie';
import 'moment/locale/en-il';
import 'moment/locale/en-nz';
import 'moment/locale/es-us';
import 'moment/locale/fr';
import React, {Component} from 'react';
import {
    ActivityIndicator,
    Alert,
    Animated,
    Platform,
    ProgressBarAndroid,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import I18n from 'react-native-i18n';
import {responsiveWidth} from 'react-native-responsive-dimensions';
import {TabBar} from 'react-native-tab-view';
import Icons from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Tag from '../../components/Tag';
import {Color} from '../../config/Color';
import Dialog from "react-native-dialog";
import {Typography} from '../../config/typography';
import * as Utils from '../../utils/DeviceUtils';
import {IlinkEmitter} from "../../utils/events";
import {
    cutString,
    cutStringWithoutDot,
    displayToast,
    displayTransactionType,
    isEmptyObject,
    isIlinkWorldWallet,
    optionDepotScreen,
    optionIdentificationScreen,
    optionNanoCreditAgentScreen,
    optionNanoSanteAgentScreen,
    optionPaiementFacture,
    optionRetraitScreen,
    transactionHistoryIlinkLabel
} from '../../utils/UtilsFunction';
import {depositActionReset} from '../../webservice/DepositApi';
import {baseUrl} from '../../webservice/IlinkConstants';
import {getWalletDetailActivated, resetWalletListDetailReducer} from '../../webservice/WalletApi';
import {
    getHyperSuperTransactionHistoryAction,
    getHyperSuperTransactionHistoryReset,
    getWalletTransactionHistory,
    getWalletTransactionHistoryReset
} from '../../webservice/WalletTransactionHistoryApi';
import {resetCommissionReducer, transferCommissionAction} from '../../webservice/WalletTransferCommission';
import {readUser} from '../../webservice/AuthApi';
import chunk from "lodash/chunk";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
import {
    fetchGetConsultationReset,
    fetchGetDrugAppareilReset,
    fetchGetNetworkActsReset,
    fetchGetProviderClassReset,
    fetchGetSubscriptionListReset,
    fetchGetUserByIdQRCodeReset,
    fetchGetUserByNameOrNumberReset
} from "../../redux/insurance/insurance.actions";
import {facturerSoinReset} from "../../webservice/NanoCreditApi";

let moment = require('moment-timezone');
const thousands = require('thousands');

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

class WalletDetail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            routes: [
                {key: 'depot', title: I18n.t('DEPOSIT')},
                {key: 'retrait', title: I18n.t('WITHDRAWAL')}
            ],
            heightHeader: Utils.heightHeader(),
            isModalConfirmVisible: false,
            wallet: {currency_code: ''},
            triggerTransferCommission: false,
            loading: false,
            isTriggerRefresh: false,
            scrollHeaderY: 0,
            displayModalHistory: false,
            displaySuperHyperModalHistory: false,
            historyItemDetail: null,
            user: null
        };

        this.renderContent = null;
        slugify.extend({'+': 'plus'});

        this.scrollY = new Animated.Value(0);
        this.scrollHeaderY = new Animated.Value(0);
        this.deltaY = new Animated.Value(0);
        this.bgBannerY = new Animated.Value(0);

        this.heightImageBanner = Utils.scaleWithPixel(250, 1);
        this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
        this.isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId');

        IlinkEmitter.on("langueChange", this.updateLangue.bind(this));

        this.props.getWalletTransactionHistoryReset();
        this.props.depositActionReset();
        this.props.resetWalletListDetailReducer();
        this.props.fetchGetSubscriptionListReset();
        this.props.fetchGetDrugAppareilReset();
        this.props.fetchGetUserByNameOrNumberReset();
        this.props.fetchGetUserByIdQRCodeReset();
        this.props.fetchGetProviderClassReset();
        this.props.fetchGetConsultationReset();
        this.props.fetchGetNetworkActsReset();
        this.props.facturerSoinReset();

        this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
        moment.locale(this.currentLocale);

        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    if (user.category !== undefined) {
                        if (user.category === "super" || user.category === "hyper") {
                            let agentId = this.props.navigation.state.params.agentId;
                            this.props.getWalletDetailActivated(agentId, true);
                            this.props.getHyperSuperTransactionHistoryReset();
                        }
                        if (user.category === "geolocated") {
                            this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
                            if (isIlinkWorldWallet(this.props.navigation.state.params.wallet.type))
                                this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, true);
                            else
                                this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, false);
                        }
                    }
                }
            }
        });

        /*        if (this.isHomeRootView) {
                    let agentId = this.props.navigation.state.params.agentId;
                    this.props.getWalletDetailActivated(agentId, true);
                    this.props.getHyperSuperTransactionHistoryReset();
                } else {
                    this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
                    if (isIlinkWorldWallet(this.props.navigation.state.params.wallet.type))
                        this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, true);
                    else
                        this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, false);
                }*/

        this.getWalletDetail();

        this.willFocus = this.props.navigation.addListener(
            'willFocus',
            payload => {
                this.props.fetchGetSubscriptionListReset();
                this.props.fetchGetDrugAppareilReset();
                this.props.fetchGetUserByNameOrNumberReset();
                this.props.fetchGetUserByIdQRCodeReset();
                this.props.fetchGetProviderClassReset();
                this.props.fetchGetConsultationReset();
                this.props.fetchGetNetworkActsReset();
                this.props.facturerSoinReset();
                const {result} = this.props;
                console.warn("will focus detail");
                this.getWalletDetail();
                this.setState({
                    wallet: {currency_code: ''}
                }, () => {
                    if (result !== null) {
                        if (typeof result.response !== 'undefined') {
                            const wallet = result.response[0];
                            readUser().then((user) => {
                                if (user !== null && user !== undefined) {
                                    if (user.category !== undefined) {
                                        switch (user.category) {
                                            case "super":
                                                this.props.getHyperSuperTransactionHistoryAction(user.code_membre, false);
                                                break;
                                            case "hyper":
                                                this.props.getHyperSuperTransactionHistoryAction(user.network_id, true);
                                                break;
                                        }
                                        this.setState({user});
                                    }
                                }
                            });
                            this.setState({
                                wallet: wallet,
                                isTriggerRefresh: false
                            })
                        }
                    }
                })
            });

    }

    getWalletDetail = () => {
        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    if (user.category !== undefined) {
                        if (user.category === "super" || user.category === "hyper") {
                            let agentId = this.props.navigation.state.params.agentId;
                            this.props.getWalletDetailActivated(agentId, true);
                            this.props.getHyperSuperTransactionHistoryReset();
                        }
                        if (user.category === "geolocated") {
                            this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
                            if (isIlinkWorldWallet(this.props.navigation.state.params.wallet.type))
                                this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, true);
                            else
                                this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, false);
                        }
                    }
                }
            }
        });
    };

    /*
         static options(passProps) {
              return {
                   topBar: {
                        drawBehind: false,
                        visible: true,
                        animate: true,
                        buttonColor: 'white',
                        background: {
                             color: 'white',
                        },
                        rightButtons: []
                   },
                   backButton: {
                        visible: true,
                        color: "white"
                   },
                   buttonColor: "white",
                   background: {
                        color: Color.primaryDarkColor
                   },
                   statusBar: {
                        drawBehind: false,
                        visible: true,
                   }
              };
         }
     */
    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'

    };

    static navigationOptions = () => {
        return {
            //title: I18n.t('WALLET'),
            //title: this.isHomeRootView ? I18n.t('WALLET') : ((typeof this.props.navigation.state.params !== 'undefined') && this.props.navigation.state.params.wallet.network),
            drawerLabel: () => null,
            headerTitle: I18n.t('WALLET'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 23,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
            title: I18n.t('WALLET')
        }
    };

    componentDidMount() {
        console.log('RESULT REQUEST', result);
        const {result} = this.props;
        if (result !== null) {
            if (typeof result.response !== 'undefined') {
                const wallet = result.response[0];
                /*                readUser().then((user) => {
                                    if (user !== null && user !== undefined) {
                                        if (user.category !== undefined) {
                                            switch (user.category) {
                                                case "super":
                                                    this.props.getHyperSuperTransactionHistoryAction(result.response.id, false);
                                                    break;
                                                case "hyper":
                                                    this.props.getHyperSuperTransactionHistoryAction(user.network_id, true);
                                                    break;
                                            }
                                            this.setState({});
                                        }
                                    }
                                });*/
                this.setState({
                    wallet: wallet,
                    isTriggerRefresh: false
                })
            }
        }
        /*else {
             if (this.state.isTriggerRefresh) {
                  console.log("this.state.isTriggerRefresh", result);
                  if (result !== null) {
                       if (typeof result.response !== 'undefined') {
                            const wallet = result.response.filter((item) => item.id === this.state.wallet.id);
                            this.setState({
                                 wallet: wallet,
                                 isTriggerRefresh: false
                            })
                            console.log("REPONSE FILTER", result.response.filter((item) => item.id === this.state.wallet.id));
                       }
                  }
             }
        } */
    }

    shouldComponentUpdate(nextProps, nextState) {

        if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {

            return false;
        } else {
            return true;
        }
    }

    /*      componentWillReceiveProps(nextProps) {

              if (nextProps.loading || nextProps.loadingTransferCommission)
                   this.setState({
                        loading: true
                   })
              else
                   this.setState({
                        loading: false
                   })
         } */
    getWalletIcon = (wallet) => {
        return `${baseUrl}/datas/img/network/${slugify(wallet.network, {lower: true})}-logo.png`;

    }

    getCreationDateToHumanFormat = (date) => {
        let re = moment.tz(date, moment.tz.guess()).format();
        return moment(re).fromNow();
    }

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

    handleIndexChange = index => this.setState({index});

    imageScale = () => {
        return this.scrollY.interpolate({
            inputRange: [0, 100],
            outputRange: [1, 0.5],
            extrapolate: 'clamp',
        });
    }

    imageTranslateY = () => {
        return this.scrollY.interpolate({
            inputRange: [0, 100],
            outputRange: [-5, 50],
            extrapolate: 'clamp',
        });
    }

    bgHeaderTranslateY = () => {
        return this.scrollY.interpolate({
            inputRange: [0, 150],
            outputRange: [-5, 0],
            extrapolate: 'clamp',
        });
    }

    refresh = () => {
        const {result} = this.props;
        console.log("STATE NAVIGATION PARAMS REFRESH", this.props.navigation.state);

        if (!this.isHomeRootView) {
            const {wallet} = this.props.navigation.state.params;
            this.props.getWalletDetailActivated(wallet.id, false);
            if (isIlinkWorldWallet(wallet.type))
                this.props.getWalletTransactionHistory(wallet.id, true);
            else
                this.props.getWalletTransactionHistory(wallet.id, false);
            this.setState({
                isTriggerRefresh: true
            });

            /*      if (typeof this.props.navigation.state.params.onRefreshDetail !== 'undefined')
                      this.props.navigation.state.params.onRefreshDetail(); */

        } else {
            let agentId = this.props.navigation.state.params.agentId;
            this.props.getWalletDetailActivated(agentId, true);
        }
    }

    renderTabBar = props => (
        <TabBar
            {...props}
            scrollEnabled
            indicatorStyle={[styles.indicator, {backgroundColor: Color.primaryColor}]}
            style={[styles.tabBar, {backgroundColor: Color.containerBackgroundColor}]}
            inactiveColor={Color.dividerColor}
            activeColor={Color.grayColor}
            tabStyle={styles.tab}
            renderLabel={({route, focused, color}) => (
                <View style={{
                    flex: 1,
                    width: Utils.getWidthDevice() / 2,
                    alignItems: 'center'
                }}>
                    <Text style={Typography.headline} style={{color}}>
                        {
                            (route.key === 'depot') ?
                                (<Icon name='arrow-bottom-right'
                                       color={color} size={20}/>)
                                :
                                (<Icon name='arrow-top-left'
                                       color={color} size={20}/>)
                        }
                        {`  ${route.title}`}

                    </Text>

                </View>
            )}

        />
    );

    renderHeader = (wallet) => (
        <View style={[
            styles.containField,
            {
                backgroundColor: Color.cardBackgroundColor,
                zIndex: 11,
                shadowColor: Color.borderColor,
                borderColor: Color.borderColor,
            }
        ]}>
            <View style={[styles.contentLeftItem]}>
                <Text numberOfLines={1} style={[Typography.caption2, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
                <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{wallet.country}</Text>
            </View>

            <View style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'flex-end',
            }}>
                <Animated.Image
                    source={{uri: this.getWalletIcon(wallet)}}
                    style={{
                        width: 120,
                        height: 120,
                        borderRadius: 60,
                        position: 'absolute',
                        alignSelf: 'center',
                        backgroundColor: Color.whiteColor,
                        bottom: 70,
                        transform: [{
                            scale: this.imageScale()
                        },
                            {
                                translateY: this.imageTranslateY()
                            }]
                    }}/>

                <View style={{
                    marginTop: 1, flex: 1,
                    alignItems: 'center',
                    justifyContent: 'flex-end'
                }}>
                    <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
                    {!(wallet.type === "ilink_sante") && <View style={{flexDirection: 'row'}}>

                        <Tag primary
                             icon={<Icon name='swap-horizontal' size={20} color={Color.whiteColor}
                                         style={{marginLeft: 15}}/>}
                             style={{
                                 paddingRight: 10,
                                 width: 120,
                                 borderTopRightRadius: 0,
                                 borderBottomRightRadius: 0,
                                 borderRightWidth: 1,
                                 borderRightColor: Color.whiteColor
                             }}
                             onPress={() => {
                                 const {result} = this.props;

                                 if (result !== null) {
                                     if (typeof result.response !== 'undefined') {

                                         if (parseInt(result.response.balance_com) === 0) {
                                             Alert.alert(
                                                 I18n.t("TRANSFER_COMMISSION_IMPOSSIBLE"),
                                                 I18n.t("COMMISSION_TRANSFER_ERROR_EMPTY"),
                                                 [
                                                     {
                                                         text: I18n.t("OK"), onPress: () => {
                                                             this.props.resetCommissionReducer();
                                                         }
                                                     }
                                                 ],
                                                 {cancelable: false}
                                             )
                                         } else
                                             this.renderDialogConfirmTransferCommission()
                                     }

                                 }

                                 /*                                    else {
                                                                         if (parseInt(this.state.wallet.balance_com) === 0) {
                                                                              Alert.alert(
                                                                                   I18n.t("ERROR_TRANSFER_COMMISSION"),
                                                                                   I18n.t("COMMISSION_TRANSFER_ERROR_EMPTY"),
                                                                                   [
                                                                                        {
                                                                                             text: I18n.t("OK"), onPress: () => {
                                                                                                  this.props.resetCommissionReducer();
                                                                                             }
                                                                                        }
                                                                                   ],
                                                                                   { cancelable: false }
                                                                              )
                                                                         }
                                                                         else
                                                                              this.renderDialogConfirmTransferCommission()
                                                                    } */
                             }}>
                            {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
                        </Tag>
                        <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} style={{marginLeft: -15}}/>}
                             style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
                             primary
                             onPress={() => {
                                 this._scrollView.scrollToEnd();
                             }}>
                            {I18n.t('HISTORY')}

                        </Tag>
                    </View>}
                </View>
            </View>
            <View style={styles.contentLeftItem}>
                <Text numberOfLines={1}
                      style={[Typography.caption2, Typography.semibold]}>{I18n.t('CREATION_DATE')}</Text>
                <Text numberOfLines={1} adjustsFontSizeToFit={true}
                      style={Typography.caption1}>{moment(wallet.created_date).format('DD/MM/YYYY')}</Text>
            </View>
        </View>
    );

    renderLoader = () => {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                {Platform.OS === 'android'
                    ?
                    (
                        <>
                            <ProgressBarAndroid/>
                            <Text>{I18n.t('LOADING_DOTS')}</Text>

                        </>
                    ) :
                    <>
                        <ActivityIndicator size="large" color={'#ccc'}/>
                        <Text>{I18n.t('LOADING_DOTS')}</Text>
                    </>
                }
            </View>
        )
    }

    renderAccountDetail = (wallet) => (
        <View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-between'}}>

            <View
                style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                }}>
                <View
                    style={[
                        styles.circlePoint,
                        {backgroundColor: Color.primaryColor},
                    ]}>
                    <Icons name='md-wallet'
                           size={28}
                           color={Color.whiteColor}
                    />
                </View>
                <View>
                    <Text style={[Typography.title3, Color.primaryColor], {marginBottom: 3}}>
                        {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                    </Text>
                    <Text
                        style={[Typography.body2]}>{`${thousands(wallet.balance_princ, ' ')} ${wallet.currency_code}`}</Text>
                </View>
            </View>

            <View
                style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                }}>
                <View
                    style={[
                        styles.circlePoint,
                        {backgroundColor: Color.primaryColor},
                    ]}>
                    <Icons name='md-cash'
                           size={28}
                           color={Color.whiteColor}
                    />
                </View>
                <View>
                    <Text style={[Typography.title3, Color.primaryColor], {marginBottom: 3}}>
                        {I18n.t('COMMISSION_ACCOUNT_TITLE')}
                    </Text>
                    <Text
                        style={Typography.body2}>{`${thousands(wallet.balance_com, ' ')} ${wallet.currency_code}`}</Text>
                </View>
            </View>

        </View>
    );

    renderModalHistoryDetail = (wallet) => {
        const {historyItemDetail} = this.state;

        return (

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

                <Dialog.Title>{I18n.t('HISTORY_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('OPERATION')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.operation}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('TRANSACTION_ID')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_transaction}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>Date</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date}</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]}>{this.state.historyItemDetail.init_country}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant}</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]}>{this.state.historyItemDetail.frais}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('NET_AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_net_init}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('EMETTEUR')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.emetteur}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('DESTINATAIRE')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.destinataire}</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]}>{this.state.historyItemDetail.final_country}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('NET_AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_net_final}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('ACTIVE_WALLET')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.reseau_payeur}</Text>
                            </View>
                        </View>
                    </View>

                </View>

                <Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
                    this.setState({
                        displayModalHistory: !this.state.displayModalHistory,
                    });

                }}/>

            </Dialog.Container>

        );
    }

    renderSuperHyperHistoryTransactionItem = (item, index) => {

        return (
            <TouchableOpacity onPress={() => {
                this.setState({displaySuperHyperModalHistory: true, historyItemDetail: item})
            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                {
                    Object.keys(omit(item, ['id', 'id_transaction', 'montant_retire', 'montant2', 'date_cassation', 'etat', 'type', 'date_fin', 'duree_mois', 'id_epargne', 'type_historique', 'frais', 'init_country', 'final_country', 'source', 'emetteur', 'montant_net_final', 'montant_net_init', 'reseau_payeur', 'operation', 'retrait_cash', 'type_historique', 'type_caution', 'id_demande', 'montant_rembourse', 'partiellement_rembourse', 'duree_mois', 'etat', 'interet', 'taxe', 'date_validation', 'date_remboursement_prevu', 'date_remboursement', 'id_user', 'id_wallet_agent', 'id_network', 'user', 'user_phone', 'agent', 'codeParrain'])).map((element, i) => (
                        <View style={{alignItems: 'center'}} key={i}>
                            <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
                                {
                                    isEqual(element, 'montant') ?
                                        `  ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}`
                                        : isEqual(element, 'destinataire') ?
                                            item[element].length > 13 ? cutString(item[element], 13) : item[element]
                                            : isEqual(element, 'date_creation') ?
                                                cutStringWithoutDot(item[element], 16)
                                                : item[element]
                                }
                            </Text>
                        </View>
                    ))
                }
            </TouchableOpacity>
        );

    }

    renderModalSuperHyperHistoryDetail = (wallet) => {
        const {historyItemDetail} = this.state;

        return (

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

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

                {isEqual(historyItemDetail.type_historique, 'N') &&
                <ScrollView persistentScrollbar={true}>
                    <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>Type</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('CAUTION_TYPE')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type_caution}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + wallet.currency_code}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + wallet.currency_code}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + wallet.currency_code}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + wallet.currency_code}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + wallet.currency_code}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash == 1 ? I18n.t('YES') : I18n.t('NO')}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('VALIDATION_DATE')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_validation}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
                            </View>
                        </View>
                    </View>
                </ScrollView>
                }

                {isEqual(historyItemDetail.type_historique, 'E') &&

                <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text style={[styles.body2]}>Type</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text style={[styles.body2]}>{I18n.t('ID_SAVINGS')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_epargne}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text style={[styles.body2]}>Type</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + wallet.currency_code}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_WITHDRAWAL')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_retire + ' ' + wallet.currency_code}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + wallet.currency_code}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + wallet.currency_code}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{isEqual(this.state.historyItemDetail.type, 'SIMPLE') ? I18n.t('NON_APPLICABLE') : this.state.historyItemDetail.date_fin}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <View style={{flex: 1}}>
                            <Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text
                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
                        </View>
                    </View>
                </View>
                }

                {isEqual(historyItemDetail.type_historique, 'T') &&

                <View>
                    <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('OPERATION')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.operation}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>{I18n.t('TRANSACTION_ID')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_transaction}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text style={[styles.body2]}>Date</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</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]}>{this.state.historyItemDetail.init_country}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant2}</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]}>{this.state.historyItemDetail.frais}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('NET_AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_net_init}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('EMETTEUR')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.emetteur}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('DESTINATAIRE')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.destinataire}</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]}>{this.state.historyItemDetail.final_country}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('NET_AMOUNT')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_net_final}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection: 'row', marginTop: 10}}>
                            <View style={{flex: 1}}>
                                <Text tyle={[Typography.body2]}>{I18n.t('ACTIVE_WALLET')}</Text>
                            </View>
                            <View style={{flex: 1, alignItems: 'flex-end'}}>
                                <Text
                                    style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.reseau_payeur}</Text>
                            </View>
                        </View>
                    </View>

                </View>
                }
                <Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
                    this.setState({
                        displaySuperHyperModalHistory: !this.state.displaySuperHyperModalHistory,
                    });

                }}/>

            </Dialog.Container>

        );
    }

    renderSuperHyperHistoryTransactionList = () => {

        const {resultHistoryHyperSuper, errorHistoryHyperSuper} = this.props;
        if (errorHistoryHyperSuper !== null) {
            if (typeof errorHistoryHyperSuper.data !== 'undefined') {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorHistoryHyperSuper.data.error}</Text>
                    </View>
                )
            } else {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorHistoryHyperSuper}</Text>
                    </View>
                )
            }
        }

        if (resultHistoryHyperSuper !== null) {
            if (resultHistoryHyperSuper.response !== null) {
                return (
                    Array.isArray(resultHistoryHyperSuper.response) && (resultHistoryHyperSuper.response.length) > 0 ?
                        (
                            <>
                                <View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                                    {
                                        transactionHistoryIlinkLabel().map((item, index) => (
                                            <View style={{alignItems: 'center'}} key={index}>
                                                <Icon name={item.icon} size={24} color={Color.primaryColor}/>
                                                <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
                                                    {I18n.t(item.label)}
                                                </Text>
                                            </View>
                                        ))
                                    }
                                </View>
                                {
                                    resultHistoryHyperSuper.response.map((item, index) => (
                                        this.renderSuperHyperHistoryTransactionItem(item, index)
                                    ))
                                }
                            </>
                        ) :
                        (
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
                                <Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
                            </View>
                        )
                )
            }
        }
    }

    renderSuperHyperHistoryTransaction = (wallet) => {

        return (
            <>
                {
                    this.props.loadingHistoryHyperSuper ?
                        (
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                {Platform.OS === 'android'
                                    ?
                                    (
                                        <>
                                            <ProgressBarAndroid/>
                                            <Text>{I18n.t('LOADING_DOTS')}</Text>

                                        </>
                                    ) :
                                    <>
                                        <ActivityIndicator size="large" color={'#ccc'}/>
                                        <Text>{I18n.t('LOADING_DOTS')}</Text>
                                    </>
                                }
                            </View>
                        ) : (wallet.type === "ilink_sante") ?
                            <View style={styles.transactionContainer}>

                                <View style={[styles.containerTouch]}>
                                    <TouchableOpacity style={styles.contain}
                                                      onPress={() => {
                                                          this.props.navigation.push(route.historiqueNanoSanteSuperHyperScreen);
                                                      }}
                                                      activeOpacity={0.9}>
                                        <Icon name='clock'
                                              color={Color.primaryColor}
                                              size={30}
                                              style={styles.imageBanner}/>

                                        <View style={[styles.content]}>

                                            <View style={{paddingTop: 20,}}>
                                                <Text
                                                    style={[Typography.headline, Typography.semibold]}>
                                                    {I18n.t('HISTORY')}
                                                </Text>
                                            </View>

                                        </View>
                                    </TouchableOpacity>
                                </View>

                            </View> :
                            <>
                                <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
                                    <Text
                                        style={[Typography.title3, Typography.semibold]}>
                                        {I18n.t('TRANSACTION_HISTORY')}
                                    </Text>
                                </View>

                                {this.renderSuperHyperHistoryTransactionList()}
                            </>
                }
            </>
        )
    }

    renderItem = (options, isOneElement, index) => {
        console.log("OPTIONS", options);
        return (
            isOneElement ?
                <>
                    <View key={index} style={[styles.containerTouch]}>

                        <TouchableOpacity style={styles.contain}
                                          onPress={() => {
                                              this.props.navigation.push(options.screen)
                                          }}
                                          activeOpacity={0.9}>

                            {
                                options.hasOwnProperty('iconType') ?
                                    <FontAwesome5 name={options.icon}
                                                  color={Color.primaryColor}
                                                  size={24}
                                                  style={styles.imageBanner}/>
                                    : <Icon name={options.icon}
                                            color={Color.primaryColor}
                                            size={24}
                                            style={styles.imageBanner}/>

                            }

                            <View style={[styles.content]}>

                                <View style={[styles.contentTitle], {paddingTop: options.title.length > 20  ? 0 : 5}}>
                                    <Text style={[Typography.headline, Typography.semibold]}>
                                        {I18n.t(options.title)}
                                    </Text>
                                </View>

                            </View>
                        </TouchableOpacity>
                    </View>

                    <View style={{flex: 1}}/>
                </> :
                <>
                    <View style={[styles.containerTouch]}>

                        <TouchableOpacity style={styles.contain}
                                          onPress={() => {
                                              this.props.navigation.push(options.screen)
                                          }}
                                          activeOpacity={0.9}>

                            {
                                options.hasOwnProperty('iconType') ?
                                    <FontAwesome5 name={options.icon}
                                                  color={Color.primaryColor}
                                                  size={24}
                                                  style={styles.imageBanner}/>
                                    : <Icon name={options.icon}
                                            color={Color.primaryColor}
                                            size={24}
                                            style={styles.imageBanner}/>

                            }


                            <View style={[styles.content]}>

                                <View style={[styles.contentTitle], {paddingTop: options.title.length > 20  ? 0 : 5}}>
                                    <Text style={[Typography.headline, Typography.semibold]}>
                                        {I18n.t(options.title)}
                                    </Text>
                                </View>

                                <View style={{flex: 1}}>
                                </View>

                            </View>
                        </TouchableOpacity>
                    </View>
                </>

        )
    };

    renderDetailWallet = (wallet) => {
        return (

            !isEmptyObject(wallet) ?
                (<>
                    {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
                    {/*                          {this.state.loading ?
                              <View
                                   style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: this.state.loading ? responsiveWidth(100) : 0, height: this.state.loading ? responsiveHeight(100) : 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                   <Text style={{ fontSize: 20, color: 'white', fontWeight: 'bold' }}>{I18n.t("LOADING_DOTS")}</Text>
                              </View> : null
                         } */}

                    <View
                        style={styles.container}>

                        <Animated.View style={{
                            position: 'absolute',
                            width: "100%",
                            zIndex: 1,
                            backgroundColor: Color.primaryColor,
                            height: 140 - this.state.scrollHeaderY,
                        }}/>

                        <ScrollView ref={component => this._scrollView = component}
                                    style={{
                                        paddingHorizontal: 20, position: 'absolute',
                                        width: '100%',
                                        height: '100%',
                                        zIndex: 2
                                    }}
                                    scrollEventThrottle={8}
                                    onScroll={Animated.event([
                                            {
                                                nativeEvent: {
                                                    contentOffset: {y: this.scrollY},
                                                },
                                            },
                                        ],
                                        {
                                            listener: (event) => {
                                                this.setState({scrollHeaderY: event.nativeEvent.contentOffset.y});
                                            }
                                        })}>
                            <View style={{marginTop: 80,}}>

                                {this.renderHeader(wallet)}

                                <View
                                    style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>

                                    {!(wallet.type === "ilink_sante") && this.renderAccountDetail(wallet)}

                                    {!this.isHomeRootView && (
                                        <>
                                            <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
                                                <Text
                                                    style={[Typography.title3, Typography.semibold]}>
                                                    {I18n.t('TRANSACTIONS')}
                                                </Text>
                                            </View>
                                            {(wallet.type === "ilink_sante") &&
                                            chunk(optionNanoSanteAgentScreen.options, 2).map((item, index) => {

                                                if (index <= 1)
                                                    return (

                                                        <View key={index} style={styles.transactionContainer}>
                                                            {
                                                                item.length === 1 ?

                                                                    item.map((wallet, i) => (
                                                                        this.renderItem(wallet, true, i)
                                                                    )) :
                                                                    item.map((wallet, i) => (
                                                                        this.renderItem(wallet, false, i)
                                                                    ))
                                                            }
                                                        </View>
                                                    )
                                                else {
                                                    return (
                                                        <View key={index} style={styles.transactionContainer}>
                                                            {this.renderItem(item[0], false, 0)}
                                                            <>
                                                                <View style={[styles.containerTouch]}>
                                                                    <TouchableOpacity style={styles.contain}
                                                                                      onPress={() => {
                                                                                          this.props.navigation.push(route.walletOptionSelect, {
                                                                                              optionSelect: optionIdentificationScreen,
                                                                                              lottie: {
                                                                                                  source: require("./../../datas/json/identification.json"),
                                                                                                  loop: true
                                                                                              }
                                                                                          })
                                                                                      }}
                                                                                      activeOpacity={0.9}>

                                                                        <Icon name='pencil-plus'
                                                                              color={Color.primaryColor}
                                                                              size={30}
                                                                              style={styles.imageBanner}/>

                                                                        <View style={[styles.content]}>

                                                                            <View style={styles.contentTitle}>
                                                                                <Text
                                                                                    style={[Typography.headline, Typography.semibold]}>
                                                                                    {I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
                                                                                </Text>
                                                                            </View>

                                                                            <View style={{flex: 1}}>
                                                                                <Text
                                                                                    style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
                                                                                    numberOfLines={5}>
                                                                                </Text>
                                                                            </View>

                                                                        </View>
                                                                    </TouchableOpacity>
                                                                </View>
                                                            </>
                                                        </View>
                                                    )
                                                }
                                            })
                                            }

                                            {(wallet.type === "ilink-world" || wallet.type === "ilink" || wallet.type === "visa") &&
                                            <View style={styles.transactionContainer}>

                                                <View style={[styles.containerTouch]}>

                                                    <TouchableOpacity style={styles.contain}
                                                                      onPress={() => {
                                                                          if (isIlinkWorldWallet(wallet.type)) {
                                                                              this.props.navigation.push(route.walletOptionSelect, {
                                                                                  optionSelect: optionDepotScreen,
                                                                                  wallet,
                                                                                  onGoBack: () => this.refresh(),
                                                                                  lottie: {
                                                                                      source: require("./../../datas/json/wallet_with_cash.json"),
                                                                                      loop: false
                                                                                  }
                                                                              })
                                                                          } else {
                                                                              this.props.navigation.push(route.walletDepot, {
                                                                                  wallet,
                                                                                  onGoBack: () => this.refresh(),

                                                                              })
                                                                          }
                                                                      }}
                                                                      activeOpacity={0.9}>

                                                        <Icon name='arrow-bottom-right'
                                                              color={Color.primaryColor}
                                                              size={30}
                                                              style={styles.imageBanner}/>

                                                        <View style={[styles.content]}>

                                                            <View style={styles.contentTitle}>
                                                                <Text
                                                                    style={[Typography.headline, Typography.semibold]}>
                                                                    {I18n.t('DEPOSIT')}
                                                                </Text>
                                                            </View>

                                                            <View style={{flex: 1}}>
                                                                <Text
                                                                    style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
                                                                    numberOfLines={5}>
                                                                    {/*I18n.t('DEPOSIT_DESCRIPTION')*/}
                                                                </Text>
                                                            </View>

                                                        </View>
                                                    </TouchableOpacity>
                                                </View>

                                                <View style={styles.containerTouch}>
                                                    <TouchableOpacity style={styles.contain}
                                                                      onPress={() => {
                                                                          if (isIlinkWorldWallet(wallet.type)) {
                                                                              this.props.navigation.push(route.walletOptionSelect, {
                                                                                  optionSelect: optionRetraitScreen,
                                                                                  wallet,
                                                                                  onGoBack: () => this.refresh(),
                                                                                  lottie: {
                                                                                      source: require("./../../datas/json/wallet_with_cash.json"),
                                                                                      loop: true
                                                                                  }
                                                                              })
                                                                          } else {
                                                                              this.props.navigation.push(route.walletRetrait, {
                                                                                  wallet,
                                                                                  onGoBack: () => this.refresh(),
                                                                              })
                                                                          }
                                                                      }
                                                                      }
                                                                      activeOpacity={0.9}>
                                                        <Icon name='arrow-top-left'
                                                              color={Color.primaryColor}
                                                              size={30}
                                                              style={styles.imageBanner}/>

                                                        <View style={[styles.content]}>

                                                            <View style={styles.contentTitle}>
                                                                <Text
                                                                    style={[Typography.headline, Typography.semibold]}>
                                                                    {I18n.t('WITHDRAWAL')}
                                                                </Text>
                                                            </View>

                                                            <View style={{flex: 1}}>
                                                                <Text
                                                                    style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
                                                                    numberOfLines={5}>
                                                                    {/*I18n.t('WITHDRAWAL_DESCRIPTION')*/}
                                                                </Text>
                                                            </View>

                                                        </View>
                                                    </TouchableOpacity>
                                                </View>
                                            </View>}

                                            {isIlinkWorldWallet(wallet.type) &&
                                            <>
                                                <View style={styles.transactionContainer}>

                                                    <View style={[styles.containerTouch]}>

                                                        <TouchableOpacity style={styles.contain}
                                                                          onPress={
                                                                              () => {
                                                                                  if (wallet.has_nano_credit === 1) {
                                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                                          optionSelect: optionNanoCreditAgentScreen,
                                                                                          wallet,
                                                                                          lottie: {
                                                                                              source: require("./../../datas/json/cedit-cards.json"),
                                                                                              loop: true
                                                                                          }
                                                                                      });
                                                                                  } else {
                                                                                      displayToast(I18n.t('NANO_CREDIT_DISABLE'));
                                                                                  }
                                                                              }
                                                                          }
                                                                          activeOpacity={0.9}>

                                                            <Icon name='cash-multiple'
                                                                  color={Color.primaryColor}
                                                                  size={30}
                                                                  style={styles.imageBanner}/>

                                                            <View style={[styles.content]}>

                                                                <View style={{paddingTop: 5,}}>
                                                                    <Text
                                                                        style={[Typography.headline, Typography.semibold]}>
                                                                        {I18n.t('NANO_CREDIT')}
                                                                    </Text>
                                                                </View>

                                                            </View>
                                                        </TouchableOpacity>
                                                    </View>

                                                </View>

                                                <View style={styles.transactionContainer}>

                                                    <View style={[styles.containerTouch]}>

                                                        <TouchableOpacity style={styles.contain}
                                                                          onPress={() => {
                                                                              this.props.navigation.push(route.walletOptionSelect, {
                                                                                  optionSelect: optionPaiementFacture,
                                                                                  onGoBack: () => this.refresh(),
                                                                                  lottie: {
                                                                                      source: require("./../../datas/json/paiement_facture.json"),
                                                                                      loop: true
                                                                                  }
                                                                              })
                                                                          }}
                                                                          activeOpacity={0.9}>

                                                            <Icon name='file-document'
                                                                  color={Color.primaryColor}
                                                                  size={30}
                                                                  style={styles.imageBanner}/>

                                                            <View style={[styles.content]}>

                                                                <View style={styles.contentTitle}>
                                                                    <Text
                                                                        style={[Typography.headline, Typography.semibold]}>
                                                                        {I18n.t('PAIEMENT_FACTURE')}
                                                                    </Text>
                                                                </View>

                                                                <View style={{flex: 1}}>
                                                                    <Text
                                                                        style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
                                                                        numberOfLines={5}>
                                                                    </Text>
                                                                </View>

                                                            </View>
                                                        </TouchableOpacity>
                                                    </View>

                                                    <View style={[styles.containerTouch]}>

                                                        <TouchableOpacity style={styles.contain}
                                                                          onPress={() => {
                                                                              this.props.navigation.push(route.walletOptionSelect, {
                                                                                  optionSelect: optionIdentificationScreen,
                                                                                  lottie: {
                                                                                      source: require("./../../datas/json/identification.json"),
                                                                                      loop: true
                                                                                  }
                                                                              })
                                                                          }}
                                                                          activeOpacity={0.9}>

                                                            <Icon name='pencil-plus'
                                                                  color={Color.primaryColor}
                                                                  size={30}
                                                                  style={styles.imageBanner}/>

                                                            <View style={[styles.content]}>

                                                                <View style={styles.contentTitle}>
                                                                    <Text
                                                                        style={[Typography.headline, Typography.semibold]}>
                                                                        {I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
                                                                    </Text>
                                                                </View>

                                                                <View style={{flex: 1}}>
                                                                    <Text
                                                                        style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
                                                                        numberOfLines={5}>
                                                                    </Text>
                                                                </View>

                                                            </View>
                                                        </TouchableOpacity>
                                                    </View>


                                                </View>

                                            </>
                                            }
                                        </>
                                    )}

                                    {!this.isHomeRootView && (wallet.type === 'ilink_sante' && wallet.category !== 'geolocated') ?
                                        this.renderHistoryTransaction(wallet)
                                        : !this.isHomeRootView && this.renderHistoryTransaction(wallet)}
                                    {this.isHomeRootView && this.renderSuperHyperHistoryTransaction(wallet)}
                                </View>


                            </View>

                        </ScrollView>
                    </View>
                </>)
                :
                (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
                    </View>
                )
        )
    }

    renderHistoryTransactionItem = (item, index, wallet) => {

        return (
            <TouchableOpacity onPress={() => {
                this.setState({displayModalHistory: true, historyItemDetail: item})
            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                {
                    isIlinkWorldWallet(wallet.type) ?
                        Object.keys(omit(item, ['id', 'id_transaction', 'type', 'frais', 'init_country', 'final_country', 'source', 'emetteur', 'montant_net_final', 'montant_net_init', 'reseau_payeur', 'operation'])).map((element, i) => (
                            <View style={{alignItems: 'center'}} key={i}>
                                <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
                                    {
                                        isEqual(element, 'montant') ?
                                            `  ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}`
                                            : isEqual(element, 'destinataire') ?
                                                item[element].length > 13 ? cutString(item[element], 13) : item[element]
                                                : isEqual(element, 'date') ?
                                                    cutStringWithoutDot(item[element], 16)
                                                    : item[element]
                                    }
                                </Text>
                            </View>
                        )) :
                        Object.keys(omit(item, ['id', 'id_transaction', 'type', 'frais', 'init_country', 'final_country', 'source', 'emetteur', 'montant_net_final', 'montant_net_init', 'reseau_payeur', 'operation'])).map((element, i) => (
                            <View style={{alignItems: 'center'}} key={i}>
                                <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
                                    {
                                        isEqual(element, 'montant') ?
                                            `  ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}`
                                            : isEqual(element, 'destinataire') ?
                                                item[element].length > 13 ? cutString(item[element], 13) : item[element]
                                                : isEqual(element, 'date') ?
                                                    cutStringWithoutDot(item[element], 16)
                                                    : item[element]
                                    }
                                </Text>
                            </View>
                        ))
                }
            </TouchableOpacity>
        );

        /*                <View
                            key={item.id}
                            style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                 <View style={styles.iconContent}>
                                      <Icon name='arrow-bottom-right'
                                           color={Color.primaryColor} size={20} />
                                 </View>
                                 <View>
                                      <Text style={Typography.subhead}>{item.description}</Text>
                                      <Text style={[Typography.caption1, Color.grayColor]} style={{ marginTop: 5 }}>
                                           {date}
                                      </Text>
                                 </View>
                            </View>
                       </View> */

    }

    renderHistoryTransactionList = (wallet) => {
        const {resultTransaction, errorTransaction} = this.props;
        if (errorTransaction !== null) {
            if (typeof errorTransaction.data !== 'undefined') {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorTransaction.data.error}</Text>
                    </View>
                )
            } else {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorTransaction}</Text>
                    </View>
                )
            }
        }

        if (resultTransaction !== null) {
            if (resultTransaction.response !== null) {
                return (
                    Array.isArray(resultTransaction.response) && (resultTransaction.response.length) > 0 ?
                        (
                            <>
                                <View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                                    {
                                        transactionHistoryIlinkLabel().map((item, index) => (
                                            <View style={{alignItems: 'center'}} key={index}>
                                                <Icon name={item.icon} size={24} color={Color.primaryColor}/>
                                                <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
                                                    {I18n.t(item.label)}
                                                </Text>
                                            </View>
                                        ))
                                    }
                                </View>
                                {
                                    resultTransaction.response.map((item, index) => (
                                        this.renderHistoryTransactionItem(item, index, wallet)
                                    ))
                                }
                            </>
                        ) :
                        (
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
                                <Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
                            </View>
                        )
                )
            }
        }
    }


    renderHistoryTransaction = (wallet) => {

        return (
            <>
                {
                    this.props.loadingTransaction ?
                        (
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                {Platform.OS === 'android'
                                    ?
                                    (
                                        <>
                                            <ProgressBarAndroid/>
                                            <Text>{I18n.t('LOADING_DOTS')}</Text>

                                        </>
                                    ) :
                                    <>
                                        <ActivityIndicator size="large" color={'#ccc'}/>
                                        <Text>{I18n.t('LOADING_DOTS')}</Text>
                                    </>
                                }
                            </View>
                        ) :
                        <>
                            {
                                wallet.type !== 'ilink_sante' && (
                                    <>
                                        <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
                                            <Text
                                                style={[Typography.title3, Typography.semibold]}>
                                                {I18n.t('TRANSACTION_HISTORY')}
                                            </Text>
                                        </View>

                                        {this.renderHistoryTransactionList(wallet)}
                                    </>
                                )
                            }
                        </>
                }
            </>
        )
    }

    renderDialogConfirmTransferCommission = () => {
        Alert.alert(
            I18n.t("CONFIRM"),
            I18n.t('CONFIRM_TRANSFER_COMMISSION')
            ,
            [
                {
                    text: I18n.t("NO"), onPress: () => {

                    }
                },
                {
                    text: I18n.t("YES"), onPress: () => {
                        const {result} = this.props;
                        if (result !== null) {
                            if (typeof result.response !== 'undefined') {
                                this.props.transferCommissionAction(result.response.id);
                            }
                        }/*
                              else
                                   this.props.transferCommissionAction(this.state.wallet.id); */

                        this.setState({
                            triggerTransferCommission: true
                        });
                    }
                }

            ],
            {cancelable: false}
        )
    }

    renderDialogTransferCommissionResponse = () => {
        const {resultTransferCommission, errorTransferCommission} = this.props;

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

        if (resultTransferCommission !== null) {
            if (resultTransferCommission.response !== null) {
                Alert.alert(
                    I18n.t("SUCCESS_TRANSFER_COMMISSION"),
                    I18n.t("COMMISSION_TRANSFER_SUCCESS"),
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.resetCommissionReducer();
                                this.refresh();
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }
    }

    render() {
        return (
            <>
                {this.state.displayModalHistory && this.renderModalHistoryDetail()}
                {this.props.result !== null &&
                this.state.displaySuperHyperModalHistory &&
                this.renderModalSuperHyperHistoryDetail(this.props.result.response)}

                <StatusBar
                    backgroundColor={Color.primaryDarkColor}
                    barStyle="light-content"
                    translucent={true}
                />
                {
                    ((this.props.loading || this.props.loadingTransferCommission) ?
                            this.renderLoader() :
                            (
                                this.props.result !== null ?

                                    Array.isArray(this.props.result.response) && (this.props.result.response.length) === 0 ?

                                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                            <Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
                                        </View>
                                        :

                                        this.renderDetailWallet(this.props.result.response)
                                    :
                                    null
                            )
                    )

                }

            </>
        );
    }
}


const mapStateToProps = state => ({
    loading: state.walletDetailReducer.loading,
    result: state.walletDetailReducer.result,
    error: state.walletDetailReducer.error,

    loadingTransaction: state.walletHistoryReducer.loadingTransaction,
    resultTransaction: state.walletHistoryReducer.resultTransaction,
    errorTransaction: state.walletHistoryReducer.errorTransaction,

    loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission,
    resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission,
    errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission,

    loadingHistoryHyperSuper: state.getHyperSuperHistoryReducer.loading,
    resultHistoryHyperSuper: state.getHyperSuperHistoryReducer.result,
    errorHistoryHyperSuper: state.getHyperSuperHistoryReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
    getWalletDetailActivated,
    getWalletTransactionHistory,
    transferCommissionAction,
    resetWalletListDetailReducer,
    resetCommissionReducer,
    getWalletTransactionHistoryReset,
    depositActionReset,
    getHyperSuperTransactionHistoryAction,
    getHyperSuperTransactionHistoryReset,

    fetchGetSubscriptionListReset,
    fetchGetDrugAppareilReset,
    fetchGetUserByNameOrNumberReset,
    fetchGetUserByIdQRCodeReset,
    fetchGetProviderClassReset,
    fetchGetConsultationReset,
    fetchGetNetworkActsReset,
    facturerSoinReset,

}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail);
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.containerBackgroundColor
    },
    indicator: {
        height: 2
    },
    tab: {
        width: Utils.getWidthDevice() / 2
    },
    tabbar: {
        height: 40
    },
    imgBanner: {
        width: '100%',
        height: 250,
        position: 'absolute',
    },
    contentService: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
    },
    containField: {
        padding: 10,
        marginBottom: 20,
        borderWidth: 0.5,
        shadowOffset: {width: 1.5, height: 1.5},
        shadowOpacity: 1.0,
        elevation: 5,
        flexDirection: "row",
        height: 140,
        borderRadius: 10
    },
    paymentItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        borderBottomWidth: 1,
        paddingVertical: 5,
        width: responsiveWidth(100),
        marginBottom: 15
    },
    iconContent: {
        width: 60,
        marginRight: 10,
        alignItems: "center"
    },
    contentLeftItem: {
        flex: 1,
        paddingTop: 40,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: "center"
    },
    tagFollow: {width: 150, margin: 10},
    profileItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingBottom: 20,
        paddingTop: 20
    },
    checkDefault: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderBottomWidth: 1,
        paddingVertical: 10,
        marginTop: 5
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
    },
    circlePoint: {
        width: 50,
        height: 50,
        borderRadius: 25,
        marginRight: 5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    transactionContainer: {
        flexDirection: 'row',
        paddingTop: 10,
    },
    containerTouch: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        shadowColor: Color.borderColor,
        borderColor: Color.borderColor,
        borderWidth: 0.5,
        shadowOffset: {width: 1.5, height: 1.5},
        shadowOpacity: 1.0,
        elevation: 5,
        borderRadius: 10,
        backgroundColor: Color.cardBackgroundColor
    },
    contain: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    imageBanner: {
        marginTop: 15,
        marginLeft: 5,
        width: Utils.scaleWithPixel(30),
        height: Utils.scaleWithPixel(30)
    },
    content: {
        height: Utils.scaleWithPixel(60),
        paddingHorizontal: 10,
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        flex: 1,
    },
    contentTitle: {
        paddingTop: 5,
    }
})