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 DeviceInfo from 'react-native-device-info';
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 { Typography } from '../../config/typography';
import * as Utils from '../../utils/DeviceUtils';
import { IlinkEmitter } from "../../utils/events";
import { cutString, isEmptyObject, isIlinkWorldWallet, optionDepotScreen, optionIdentificationScreen, optionPaiementFacture, optionRetraitScreen, transactionHistoryLabel } from '../../utils/UtilsFunction';
import { depositActionReset } from '../../webservice/DepositApi';
import { baseUrl } from '../../webservice/IlinkConstants';
import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
import { resetCommissionReducer, transferCommissionAction } from '../../webservice/WalletTransferCommission';
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: null,
               triggerTransferCommission: false,
               loading: false,
               isTriggerRefresh: false,
               scrollHeaderY: 0
          };

          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.currentLocale = DeviceInfo.getDeviceLocale().includes("fr") ? "fr" : "en-gb";
          moment.locale(this.currentLocale);
          if (this.isHomeRootView) {
               let agentId = this.props.navigation.state.params.agentId;
               this.props.getWalletDetailActivated(agentId, true);
          }
          else {
               this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
               this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id);
          }
     }
     /* 
          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() {

          const { result } = this.props;
          if (result !== null) {
               if (typeof result.response !== 'undefined') {
                    const wallet = result.response[0];
                    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, 'Etc/GMT+0').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);
               this.props.getWalletTransactionHistory(wallet.id);
               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.body1, 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 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.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
                    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{this.getCreationDateToHumanFormat(wallet.created_date)}</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, ' ')}</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, ' ')}</Text>
                    </View>
               </View>

          </View>
     );

     renderDetailWallet = (wallet) => {
          console.log("WALLET NAME SLUGIFY", slugify(wallet.network));
          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 }]}>

                                             {this.renderAccountDetail(wallet)}

                                             {!this.isHomeRootView && (
                                                  <>
                                                       <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={() => {
                                                                           if (isIlinkWorldWallet(wallet.network)) {
                                                                                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.network)) {
                                                                                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.network) &&
                                                            <>
                                                                 <View style={styles.transactionContainer}>

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

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

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

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

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

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

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

                                                                      <View style={[styles.containerTouch]}>
                                                                           <TouchableOpacity style={styles.contain}
                                                                                onPress={() => { }}
                                                                                activeOpacity={0.9}>
                                                                                <Icon name='heart-multiple'
                                                                                     color={Color.primaryColor}
                                                                                     size={30}
                                                                                     style={styles.imageBanner} />

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

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

                                                                                     <View style={{ flex: 1 }}>
                                                                                          <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                                               {I18n.t('NANO_SANTE_DESCRIPTION')}
                                                                                          </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 && this.renderHistoryTransaction()}
                                        </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) => {

          return (
               <View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
                    {
                         Object.keys(omit(item, ['id'])).map((element, i) => (
                              <View style={{ alignItems: 'center' }} key={i}>
                                   <Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
                                        {isEqual(element, 'date')
                                             ? this.getCreationDateToHumanFormat(item[element])
                                             :
                                             isEqual(element, 'destinataire')
                                                  ? cutString(item[element], 6)
                                                  :
                                                  item[element]
                                        }
                                   </Text>
                              </View>
                         ))
                    }
               </View>
          );

          /*                <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 = () => {
          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 }]}>
                                             {
                                                  transactionHistoryLabel().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 }}>
                                                                 {item.label}
                                                            </Text>
                                                       </View>
                                                  ))
                                             }
                                        </View>
                                        {
                                             resultTransaction.response.map((item, index) => (
                                                  this.renderHistoryTransactionItem(item, index)
                                             ))
                                        }
                                   </>
                              ) :
                              (
                                   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start' }}>
                                        <Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
                                   </View>
                              )
                    )
               }
          }
     }


     renderHistoryTransaction = () => {

          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()}
                              </>
                    }
               </>
          )
     }

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

const mapDispatchToProps = dispatch => bindActionCreators({
     getWalletDetailActivated,
     getWalletTransactionHistory,
     transferCommissionAction,
     resetWalletListDetailReducer,
     resetCommissionReducer,
     getWalletTransactionHistoryReset,
     depositActionReset
}, 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,
     }
})