import React, {Component} from 'react';
import {
    ActivityIndicator,
    Alert,
    Animated,
    Platform,
    ProgressBarAndroid,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import * as Utils from '../../utils/DeviceUtils';
import Icons from 'react-native-vector-icons/Ionicons'
import {Color} from '../../config/Color';
import omit from 'lodash/omit';
import Tag from '../../components/Tag';
import {IlinkEmitter} from "../../utils/events";
import {Typography} from '../../config/typography';
import {responsiveWidth,} from 'react-native-responsive-dimensions';
import {
    getWalletDetailActivated,
    passwordValidationAction,
    passwordValidationReset,
    resetWalletListDetailReducer
} from '../../webservice/WalletApi';
import {depositActionReset} from '../../webservice/DepositApi';
import {
    getWalletTransactionHistoryReset,
    getWalletTransactionHistoryUser
} from '../../webservice/WalletTransactionHistoryApi';
import {getUserIdentificationAction, getUserIdentificationResetAction} from '../../webservice/IdentificationApi';
import {resetCommissionReducer, transferCommissionAction} from '../../webservice/WalletTransferCommission';
import Dialog from "react-native-dialog";
import isEqual from 'lodash/isEqual';
import {baseUrl} from '../../webservice/IlinkConstants';
import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'
import 'moment/locale/en-gb'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {
    cutString,
    cutStringWithoutDot,
    displayToast,
    isEmptyObject,
    optionDepotUserScreen,
    optionIdentificationUserScreen,
    optionLinkAccountUserScreen,
    optionNanoCreditScreen,
    optionNanoSanteUserScreen,
    optionPaiementFacture,
    optionRetraitUserScreen,
    transactionHistoryIlinkLabel
} from '../../utils/UtilsFunction';
import {readUser} from '../../webservice/AuthApi';
import LottieView from "lottie-react-native";
import * as Animatable from "react-native-animatable";
import {Fumi} from "react-native-textinput-effects";
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
import Button from "../../components/Button";
import Entypo from "react-native-vector-icons/Entypo";

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

const thousands = require('thousands');

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

class WalletDetailUser extends Component {

    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            heightHeader: Utils.heightHeader(),
            isModalConfirmVisible: false,
            wallet: null,
            triggerTransferCommission: false,
            loading: false,
            isTriggerRefresh: false,
            scrollHeaderY: 0,
            user: null,
            displayModalHistory: false,
            historyItemDetail: null,
            isIdentified: false,
            isIdentifiedValidated: false,
            password: '',
            isLogged: false
        };

        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.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
        moment.locale(this.currentLocale);
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
        IlinkEmitter.on("refreshWallet", this.refresh);

        this.props.getWalletTransactionHistoryReset();
        this.props.depositActionReset();
        this.props.resetWalletListDetailReducer();
        this.props.passwordValidationReset();

        this.props.getUserIdentificationResetAction();
        console.warn("Wallet User Props", this.props);

        this.getWalletDetail();

        this.willFocus = this.props.navigation.addListener(
            'willFocus',
            payload => {
                this.getWalletDetail();
            });
    }

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

    };

    static navigationOptions = ({ navigation }) => {
        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'),
/*            headerLeft: (
                <Entypo
                    name="menu"
                    color="#fff"
                    onPress={()=> {navigation.openDrawer()}}
                    size={24}
                />
            )*/
        }
    };

    getWalletDetail = () => {
        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    this.setState({user});
                    this.props.getWalletDetailActivated(user.id, null);
                    this.props.getUserIdentificationAction(user.phone);
                    this.props.getWalletTransactionHistoryUser(user.id);
                }
            }
        });
    };

    componentDidMount() {
        const {result, resultUserIdentification, errorUserIdentification} = this.props;

        if (result !== null) {
            if (typeof result.response !== 'undefined') {
                const wallet = result.response[0];
                console.log("WALLET RECUPERER", wallet);
                this.setState({
                    wallet: wallet,
                    isTriggerRefresh: false
                });
            }
        }

        if (resultUserIdentification !== null) {
            console.log("RESULT NUMBER DETAIL", resultUserIdentification);
            if (typeof resultUserIdentification.response !== 'undefined') {
                this.setState({
                    isIdentified: resultUserIdentification.response.isIdentified,
                    isIdentifiedValidated: resultUserIdentification.response.isIdentifiedValidated,
                })
            }
        }

    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.resultPasswordValidation !== null) {
            if (nextProps.resultPasswordValidation.status === 200) {
                this.setState({
                    isLogged: true
                });
                this.props.passwordValidationReset();
            }
        }
        if (nextProps.errorPasswordValidation !== null) {
            console.log(nextProps.errorPasswordValidation);
            Alert.alert(
                I18n.t("ERROR_LABEL"),
                '' + nextProps.errorPasswordValidation,
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            this.props.passwordValidationReset();
                        }
                    }
                ],
                {cancelable: false}
            );
            this.setState({
                isLogged: false
            });
        }

        /*              if (nextProps.loading || nextProps.loadingTransferCommission)
                   this.setState({
                        loading: true
                   })
              else
                   this.setState({
                        loading: false
                   })*/
    }

    shouldComponentUpdate(nextProps, nextState) {

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

            return false;
        } else {
            return true;
        }
    }

    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 = () => {
        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    this.props.getWalletDetailActivated(user.id, null);
                }
            }
        });
    }


    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>
                    <View style={{flexDirection: 'row'}}>
                        <Tag icon={<Icon name='link' size={20} color={Color.whiteColor} style={{marginLeft: -15}}/>}
                             style={{
                                 paddingRight: 10,
                                 width: 120,
                                 borderTopRightRadius: 0,
                                 borderBottomRightRadius: 0,
                                 borderRightWidth: 1,
                                 borderRightColor: Color.whiteColor
                             }}
                             primary
                             onPress={() => {
                                 this.props.navigation.push(route.walletOptionSelect, {
                                     optionSelect: optionLinkAccountUserScreen,
                                     lottie: {
                                         source: require("./../../datas/json/link_card.json"),
                                         loop: true
                                     },
                                     isIdentified: this.props.resultUserIdentification.response.isIdentified
                                 });
                             }}>
                            &nbsp;{I18n.t('LINK_CARD_REATTACH')}
                        </Tag>
                        <Tag icon={<Icon name='update' size={20} color={Color.whiteColor}/>} primary
                             style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
                             onPress={() => {
                                 this._scrollView.scrollToEnd();
                             }}>
                            &nbsp;&nbsp;{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, ' ')} ${wallet.currency_code}`}</Text>
                </View>
            </View>

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

        </View>
    );

    renderDetailWallet = (wallet) => {
        return (
            !isEmptyObject(wallet) ?
                (<>
                    {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}

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

                                    {this.renderAccountDetail(wallet)}

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

                                        <View style={styles.transactionContainer}>

                                            <View style={[styles.containerTouch]}>
                                                <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                          optionSelect: optionDepotUserScreen,
                                                                          onGoBack: () => this.refresh(),
                                                                          lottie: {
                                                                              source: require("./../../datas/json/wallet_with_cash.json"),
                                                                              loop: false
                                                                          }
                                                                      })
                                                                  }}
                                                                  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('ENVOIE_ARGENT')}
                                                            </Text>
                                                        </View>

                                                        {/*                                                                       <View style={{ flex: 1 }}>
                                                                           <Text numberOfLines={1} 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={() => {
                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                          optionSelect: optionRetraitUserScreen,
                                                                          onGoBack: () => this.refresh(),
                                                                          lottie: {
                                                                              source: require("./../../datas/json/wallet_with_cash.json"),
                                                                              loop: true
                                                                          }
                                                                      })
                                                                  }}
                                                                  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('RETRAIT_ARGENT')}
                                                            </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>

                                        <View style={styles.transactionContainer}>

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

                                                <TouchableOpacity style={styles.contain}
                                                                  onPress={
                                                                      () => {
                                                                          if (this.props.result.response.has_nano_credit === 1) {
                                                                              this.props.navigation.push(route.walletOptionSelect, {
                                                                                  optionSelect: optionNanoCreditScreen,
                                                                                  wallet,
                                                                                  lottie: {
                                                                                      source: require("./../../datas/json/cedit-cards.json"),
                                                                                      loop: true
                                                                                  },
                                                                                  isNanoCredit: 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={[styles.content]}>

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

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

                                            <View style={[styles.containerTouch]}>
                                                <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                          optionSelect: optionNanoSanteUserScreen,
                                                                          wallet,
                                                                          lottie: {
                                                                              source: require("./../../datas/json/cedit-cards.json"),
                                                                              loop: true
                                                                          },
                                                                          isNanoSante: true
                                                                      });
                                                                  }}
                                                                  activeOpacity={0.9}>
                                                    <Icon name='heart-multiple'
                                                          color={Color.primaryColor}
                                                          size={30}
                                                          style={styles.imageBanner}/>
                                                    <View style={[styles.content]}>

                                                        <View style={{paddingTop: 20,}}>
                                                            <Text style={[Typography.headline, Typography.semibold]}>
                                                                {I18n.t('NANO_SANTE')}
                                                            </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={() => {
                                                                      /*if (!this.state.isIdentified)
                                                                           this.props.navigation.push(route.createIdentificationUser)
                                                                      else
                                                                           displayToast(I18n.t('ALREADY_IDENTIFIED')); */
                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                          optionSelect: optionIdentificationUserScreen,
                                                                          lottie: {
                                                                              source: require("./../../datas/json/identification.json"),
                                                                              loop: true
                                                                          },
                                                                          isIdentified: this.props.resultUserIdentification.response.isIdentified
                                                                      })

                                                                  }}
                                                                  activeOpacity={0.9}>

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

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

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

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

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

                                        <View style={styles.transactionContainer}>

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

                                                <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {

                                                                      this.props.navigation.push('ubaFormScreen');
                                                                  }} activeOpacity={0.9}>

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

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

                                                        <View style={styles.contentTitle}>
                                                            <Text style={[Typography.headline, Typography.semibold]}>
                                                                Agency Banking
                                                            </Text>
                                                        </View>

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

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


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

                                    {this.renderHistoryTransaction(wallet)}
                                </View>
                            </View>

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

    }

    renderModalHistoryDetail = () => {
        const {historyItemDetail} = this.state;
         const ma_condition = historyItemDetail.operation === "Retrait de carte vers wallet" || historyItemDetail.operation === "Retrait de carte vers cash" || historyItemDetail.operation === "Envoi de carte vers autre wallet";
    
        return (


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

                <Dialog.Title>{I18n.t('HISTORY_DETAIL')}</Dialog.Title>
        {ma_condition ? (
            <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('CARD_ISSUING_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('TTC_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('EXCHANGE_TAUX')}</Text>
                    </View>
                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                        <Text
                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.exchange_rate}</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>
         ) : (
           
            <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>

        );
    }

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

        return (
            <TouchableOpacity onPress={() => {
                this.setState({displayModalHistory: true, historyItemDetail: item})
            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                {
                    Object.keys(omit(item, ['id', 'id_transaction', 'type', 'frais', 'init_country', 'final_country', 'exchange_rate', '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], ' ')}`
                                        : 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>
                        ) :
                        <>
                            <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
                                <Text
                                    style={[Typography.title3, Typography.semibold]}>
                                    {I18n.t('TRANSACTION_HISTORY')}
                                </Text>
                            </View>

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


    render() {
        console.warn("Wallet Detail user Props", this.props);
        return (
            <>
                {this.state.displayModalHistory && this.renderModalHistoryDetail()}
                <StatusBar
                    backgroundColor={Color.primaryDarkColor}
                    barStyle="light-content"
                    translucent={true}
                />
                {
                    ((this.props.loading || this.props.loadingUserIdentification) ?
                            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.props.result.response.password_validation === "MIN" && !this.state.isLogged ?
                                            <ScrollView style={{flex: 1, padding: 20}}>
                                                <Animatable.View ref={(comp) => {
                                                    this.codeAgentAnim = comp
                                                }}>
                                                    <Fumi iconClass={FontAwesomeIcon}
                                                          label={I18n.t('PASSWORD')}
                                                          iconColor={'#f95a25'}
                                                          iconSize={20}
                                                          secureTextEntry
                                                          iconName="lock"
                                                          value={this.state.password}
                                                          onChangeText={(password) => {
                                                              this.setState({password});
                                                          }}
                                                          style={styles.input} />
                                                </Animatable.View>

                                                <Button
                                                    loading={this.props.loadingPasswordValidation}
                                                    onPress={() => {
                                                        this.props.passwordValidationAction({
                                                            password: this.state.password,
                                                            user_id: this.props.navigation.state.params.agentId,
                                                            network_agent_id: this.props.result.response.network_agent_id
                                                        });
                                                    }}>
                                                    {I18n.t('SUBMIT_LABEL')}
                                                </Button>
                                            </ScrollView>
                                            :
                                            this.renderDetailWallet(this.props.result.response)
                                    : this.props.error !== null &&
                                    this.props.error.data !== null &&
                                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                        <LottieView
                                            style={styles.lottie}
                                            source={require("./../../datas/json/no_wallet")}
                                            autoPlay={true}
                                            loop={false}
                                        />
                                        <Text style={Typography.body1}>{this.props.error.data.error}</Text>
                                    </View>
                            )
                    )
                }

            </>
        );
    }
}


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,

    loadingUserIdentification: state.getUserIdentificationReducer.loading,
    resultUserIdentification: state.getUserIdentificationReducer.result,
    errorUserIdentification: state.getUserIdentificationReducer.error,

    loadingPasswordValidation: state.passwordValidationReducer.loading,
    resultPasswordValidation: state.passwordValidationReducer.result,
    errorPasswordValidation: state.passwordValidationReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
    getWalletDetailActivated,
    getWalletTransactionHistoryUser,
    transferCommissionAction,
    resetWalletListDetailReducer,
    resetCommissionReducer,
    getWalletTransactionHistoryReset,
    depositActionReset,
    getUserIdentificationAction,
    getUserIdentificationResetAction,
    passwordValidationAction,
    passwordValidationReset,
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(WalletDetailUser);
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.containerBackgroundColor
    },
    indicator: {
        height: 2
    },
    tab: {
        width: Utils.getWidthDevice() / 2
    },
    tabbar: {
        height: 40
    },
    lottie: {
        width: 248,
        height: 248
    },
    imgBanner: {
        width: '100%',
        height: 250,
        position: 'absolute',
    },
    contentService: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    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',
        flex: 1,
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
    },
    containerTouch: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 1,
        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,
    }
})