import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Image, StatusBar, Alert, FlatList, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useActionSheet } from '@expo/react-native-action-sheet'
const route = require('./../../route.json');
let slugify = require('slugify');
import I18n from 'react-native-i18n';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import omit from 'lodash/omit';
import * as Utils from '../../utils/DeviceUtils';
import { Images } from '../../config/Images';
import { Color } from '../../config/Color';
import { baseUrl } from '../../webservice/IlinkConstants';
import { IlinkEmitter } from "../../utils/events";
import { Provider, Appbar } from 'react-native-paper';
import { readUser } from '../../webservice/AuthApi';
import { getNanoCreditAccountReset, getNanoCreditAccountAction, getNanoCreditUserHistoryAction, getNanoCreditUserHistoryReset } from '../../webservice/user/NanoCreditApi';
import _ from 'lodash';
import Icons from 'react-native-vector-icons/Ionicons'
import { FontWeight, Typography } from '../../config/typography';
import LottieView from 'lottie-react-native';
import { isIlinkWorldWallet, optionDepotScreen, optionPaiementFactureSubScreen, displayTransactionType, displayToast, cutStringWithoutDot, cutString, transactionHistoryIlinkLabel } from '../../utils/UtilsFunction';
import chunk from 'lodash/chunk';
import thousands from 'thousands';
import Tag from '../../components/Tag';
import Dialog from "react-native-dialog";
import { transactionHistoryNanoCreditLabel } from '../../utils/UtilsFunction';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { responsiveWidth } from 'react-native-responsive-dimensions';

class WalletOptionSelect extends Component {

     constructor(props) {
          super(props);
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
          this.state = {
               options: this.props.navigation.state.params.optionSelect.options,
               title: this.props.navigation.state.params.optionSelect.title,
               subTitle: this.props.navigation.state.params.optionSelect.subTitle,
               type: this.props.navigation.state.params.optionSelect.type,
               wallet: this.props.navigation.state.params.wallet,
               lottie: this.props.navigation.state.params.lottie,
               onGoBack: this.props.navigation.state.params.onGoBack,
               isIdentified: this.props.navigation.state.params.isIdentified || null,
               isNanoCredit: this.props.navigation.state.params.hasOwnProperty('isNanoCredit'),
               user: null,
               displayModalHistory: false,
               historyItemDetail: null,
               isDataHasLoaded: false
          }
          console.log("WALLET OPTION PROPS", this.props);
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));

          this.props.getNanoCreditAccountReset();
          this.props.getNanoCreditUserHistoryReset();

          readUser().then((user) => {
               if (user) {
                    if (user !== undefined) {
                         if (user.category === undefined) {
                              this.props.getNanoCreditAccountAction(user.id);
                              this.props.getNanoCreditUserHistoryAction(user.id, true);
                         } else {
                              if (user.category === 'geolocated')
                                   this.props.getNanoCreditUserHistoryAction(this.state.wallet.id, false);
                         }
                         this.setState({ user });
                    }
               }
          });

          this.willFocus = this.props.navigation.addListener(
               'willFocus',
               payload => {
                    console.log("WIIL FOCUS CALL");
                    readUser().then((user) => {
                         if (user) {
                              if (user !== undefined) {
                                   if (user.category === undefined) {
                                        this.props.getNanoCreditAccountAction(user.id);
                                        this.props.getNanoCreditUserHistoryAction(user.id, true);
                                   } else {
                                        if (user.category === 'geolocated')
                                             this.props.getNanoCreditUserHistoryAction(this.state.wallet.id, false);
                                   }
                              }
                         }
                    });
               });
     }

     static navigationOptions = ({ navigation }) => ({
          header: null,
          headerMode: 'none',
          headerTitle: null,
          activeColor: '#f0edf6',
          inactiveColor: '#3e2465',
          barStyle: { backgroundColor: '#694fad' },

          drawerLabel: I18n.t('CREDIT_MANAGE'),
          drawerIcon: ({ tintColor }) => (
               <Icon
                    name={'credit-card'}
                    size={24}
               />)
     });

     renderResultGetNanoCreditAccount() {
          const { result } = this.props;
          console.log("BEFORE", this.props);
          if (result !== null) {
               if (result.response !== null) {
                    this.setState({
                         user: { ...this.state.user, balance_credit: result.response.balance_credit, balance_epargne: result.response.balance_epargne },
                         isDataHasLoaded: true
                    });
                    console.log("AFTER", this.props);
               }

          }
     }

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

     redirectToRoute = (optionsParam) => {

          if (optionsParam.hasOwnProperty('hasSubMenu')) {

               let options = [];
               for (let index = 0; index < optionsParam.subMenuOption.length; index++) {
                    options.push(optionsParam.subMenuOption[index].title);
               }
               const destructiveButtonIndex = 0;
               const cancelButtonIndex = 2;

               this.props.showActionSheetWithOptions(
                    {
                         options,
                         cancelButtonIndex,
                         destructiveButtonIndex,
                    },
                    buttonIndex => {
                         this.props.navigation.push(optionsParam.subMenuOption[buttonIndex].screen);
                    },
               );
               console.log(this.props);
          } else {
               switch (this.state.type) {
                    case 'FACTURE':
                         this.props.navigation.push(optionsParam.screen, {
                              optionSelect: optionsParam.subScreenOption,
                              onGoBack: () => this.props.navigation.state.params.onGoBack(),
                         });
                         break;
                    case 'DEPOT':
                         this.props.navigation.push(optionsParam.screen, {
                              optionSelect: optionsParam.subScreenOption,
                              wallet: this.state.wallet,
                              onGoBack: () => this.props.navigation.state.params.onGoBack(),
                         });
                         break;
                    case 'DEPOT_USER':
                         this.props.navigation.push(optionsParam.screen, {
                              wallet: this.state.wallet,
                              onGoBack: () => this.props.navigation.state.params.onGoBack(),
                              optionSelect: optionsParam.subScreenOption,
                         });
                         break;
                    case 'RETRAIT':
                         this.props.navigation.push(optionsParam.screen, {
                              wallet: this.state.wallet,
                              onGoBack: () => this.props.navigation.state.params.onGoBack(),
                         });
                         break;
                    case 'WALLET_TO_BANK':
                         this.props.navigation.push(optionsParam.screen, {
                              wallet: this.state.wallet,
                              optionSelect: optionsParam.subScreenOption,
                              onGoBack: () => this.props.navigation.state.params.onGoBack(),
                         });
                         break;
                    case 'NANO_CREDIT':
                         this.props.navigation.push(optionsParam.screen, {
                              wallet: this.state.wallet,
                              optionSelect: optionsParam.subScreenOption,
                              onGoBack: () => this.props.navigation.state.params.onGoBack(),
                         });
                         break;

                    default:
                         this.props.navigation.push(optionsParam.screen)
                         break;
               }
          }

     }

     renderItem = (options, isOneElement, index) => (
          isOneElement ?
               <>
                    <View key={index} style={[styles.containerTouch]}>

                         <TouchableOpacity style={styles.contain}
                              onPress={() => {
                                   this.redirectToRoute(options);
                              }}
                              activeOpacity={0.9}>

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

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

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

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

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

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

                         <TouchableOpacity style={styles.contain}
                              onPress={() => {
                                   if (!_.isNil(this.state.isIdentified)) {
                                        console.log(options);
                                        if (_.isEqual(options.screen, 'createIdentificationUser')) {
                                             if (this.state.isIdentified)
                                                  displayToast(I18n.t('ALREADY_IDENTIFIED'));
                                             else
                                                  this.redirectToRoute(options);
                                        }
                                        else if (_.isEqual(options.screen, 'modifyIdentificationUser')) {
                                             if (!this.state.isIdentified)
                                                  displayToast(I18n.t('NOT_YET_IDENTIFY'));
                                             else
                                                  this.redirectToRoute(options);
                                        }
                                   }
                                   else
                                        this.redirectToRoute(options);

                              }}
                              activeOpacity={0.9}>

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

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

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

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

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

     );

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

     renderAccountDetail = (options) => (
          <>
               <View
                    style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
                    <View style={{ flexDirection: 'row', 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('CREDIT_ACCOUNT')}
                                   </Text>
                                   {this.state.user !== null ?
                                        <Text style={[Typography.body2]}>{`${thousands(this.state.user.balance_credit, ' ')} ${this.state.wallet.currency_code}`}</Text>
                                        : null}
                              </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('SAVINGS_ACCOUNT')}
                                   </Text>
                                   {this.state.user !== null ?
                                        <Text style={[Typography.body2]}>{`${thousands(this.state.user.balance_epargne, ' ')} ${this.state.wallet.currency_code}`}</Text>
                                        : null}
                              </View>
                         </View>

                    </View>
               </View>
               <View style={{ flexDirection: 'row', marginTop: 30, marginBottom: 10, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} style={{ marginLeft: -15 }} />}
                         style={{ paddingRight: 10, width: 120, borderRightWidth: 1, borderRightColor: Color.whiteColor }}
                         primary
                         onPress={() => {
                              this._scrollView.scrollToEnd();
                         }}>{I18n.t('HISTORY')}
                    </Tag>

               </View>
          </>
     );

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


          if (resultHistory !== null) {
               if (resultHistory.response !== null) {
                    return (
                         Array.isArray(resultHistory.response) && (resultHistory.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 }}>
                                                                 {item.label}
                                                            </Text>
                                                       </View>
                                                  ))
                                             }
                                        </View>
                                        {
                                             resultHistory.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>
                              )
                    )
               }
          }
     }

     renderHistoryTransactionItem = (item, index) => {

          return (
               <TouchableOpacity onPress={() => { this.setState({ displayModalHistory: true, historyItemDetail: item }) }} style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
                    {

                         !isNil(this.state.user.category) ?
                              Object.keys(omit(item, ['id', 'retrait_cash', 'type_historique', 'type_caution', 'id_demande', 'montant_rembourse', 'partiellement_rembourse', 'duree_mois', 'etat', 'interet', 'taxe', 'date_validation', 'date_remboursement_prevu', 'date_remboursement', 'id_user', 'id_wallet_agent', 'id_network', 'user', 'user_phone', 'agent', 'codeParrain'])).map((element, i) => (
                                   <View style={{ alignItems: 'center' }} key={i}>

                                        <Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
                                             {
                                                  isEqual(element, 'montant') ?
                                                       `  ${thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
                                                       : isEqual(element, 'date_creation') ?
                                                            cutStringWithoutDot(item[element], 16) 
                                                                 : item[element]
                                             }
                                        </Text>
                                   </View>
                              ))
                              :
                              Object.keys(omit(item, ['id', 'type', 'id_epargne',  'type_historique', 'date_demande', 'date_fin', 'date_remboursement_prevu', 'date_validation', 'date_cassation', 'date_remboursement', 'id_demande', 'duree_mois', 'taxe', '', 'date_fin', 'date_cassation', 'etat', 'id_user', 'id_network', 'user', 'partiellement_rembourse', 'user_phone', 'type_caution', 'interet', 'date_remboursement_prevu', 'date_remboursement', 'id_wallet_agent', 'retrait_cash', 'codeParrain', 'agent', 'montant_rembourse', ''])).map((element, i) => (
                                   <View style={{ alignItems: 'center' }} key={i}>

                                        <Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
                                             {
                                                  isEqual(element, 'montant') ?
                                                       `  ${thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
                                                       : isEqual(element, 'date_creation') ?
                                                            cutStringWithoutDot(item[element], 16) 
                                                                 : item[element]
                                             }
                                        </Text>
                                   </View>
                              ))
                    }
               </TouchableOpacity>
          );
     }

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

          return (

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

                    <Dialog.Title>Détail de l'historique</Dialog.Title>
                    {
                         isNil(this.state.user.category) ?
                              isEqual(historyItemDetail.type_historique, 'N') ?
                                   <ScrollView persistentScrollbar={true}>
                                        <View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text style={[styles.body2]}>Type</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{displayTransactionType(this.state.historyItemDetail.type_historique)}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash + ' ' + this.state.wallet.currency_code}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('DEMAND_DATE')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_demande}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
                                                  </View>
                                             </View>
                                             <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                                  <View style={{ flex: 1 }}>
                                                       <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
                                                  </View>
                                                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
                                                  </View>
                                             </View>
                                        </View>
                                   </ScrollView>
                                   :
                                   <View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text style={[styles.body2]}>Type</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{displayTransactionType(this.state.historyItemDetail.type_historique)}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text style={[styles.body2]}>Type</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_fin}</Text>
                                             </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                             <View style={{ flex: 1 }}>
                                                  <Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
                                             </View>
                                             <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
                                             </View>
                                        </View>
                                   </View>

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

                    }} />

               </Dialog.Container>

          );
     }

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

                    {
                         this.props.loadingHistory ?
                              (
                                   <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>
                              ) : !isNil(this.state.user) &&
                              this.renderHistoryTransactionList()

                    }
               </View>
          );
     }
     render() {
          !this.state.isDataHasLoaded && this.renderResultGetNanoCreditAccount();
          return (
               <Provider>
                    <View style={{ flex: 1 }}>

                         <StatusBar
                              backgroundColor={Color.primaryDarkColor}
                              barStyle="light-content"
                              translucent={false}
                         />

                         <Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
                              <Appbar.BackAction
                                   onPress={() => { this.props.navigation.pop() }}
                              />
                              <Appbar.Content
                                   title={this.state.title}
                                   subtitle={this.state.subTitle}
                              />
                         </Appbar.Header>

                         <ScrollView style={styles.container} ref={component => this._scrollView = component} >

                              {this.state.displayModalHistory && this.renderModalHistoryDetail()}

                              <View>
                                   {
                                        this.state.isNanoCredit ?
                                             this.renderAccountDetail()
                                             :
                                             <View style={{
                                                  justifyContent: 'center',
                                                  alignItems: 'center'
                                             }}>
                                                  <LottieView
                                                       style={styles.lottie}
                                                       source={this.state.lottie.source}
                                                       autoPlay
                                                       loop={this.state.lottie.loop}
                                                  />
                                             </View>
                                   }

                              </View>

                              <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                                   <Text
                                        style={[Typography.title3, Typography.semibold]}>
                                        {I18n.t('OPERATIONS')}
                                   </Text>
                              </View>
                              {
                                   chunk(this.state.options, 2).map((item, index) => (

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

                                                       item.map((wallet, i) => (
                                                            this.renderItem(wallet, true, i)
                                                       )) :
                                                       item.map((wallet, i) => (
                                                            this.renderItem(wallet, false, i)
                                                       ))
                                             }
                                        </View>
                                   ))
                              }

                              {
                                   isEqual(this.props.navigation.state.params.optionSelect.type, 'NANO_CREDIT') ?
                                        this.renderHistory()
                                        : <View style={{ flex: 1 }} />
                              }

                         </ScrollView>

                    </View>
               </Provider>
          );
     }
}

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

     loadingHistory: state.getNanoCreditHistoryUserReducer.loading,
     resultHistory: state.getNanoCreditHistoryUserReducer.result,
     errorHistory: state.getNanoCreditHistoryUserReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
     getNanoCreditAccountAction,
     getNanoCreditAccountReset,

     getNanoCreditUserHistoryAction,
     getNanoCreditUserHistoryReset
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(connectActionSheet(WalletOptionSelect));

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor,
          paddingHorizontal: 20,
     },
     item: {
          paddingVertical: 15,
          borderBottomWidth: 1,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center"
     },
     lottie: {
          width: 540,
          height: 240
     },
     circlePoint: {
          width: 50,
          height: 50,
          borderRadius: 25,
          marginRight: 5,
          alignItems: 'center',
          justifyContent: 'center',
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 10,
          marginTop: 5
     },
     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(65),
          paddingHorizontal: 10,
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          flex: 1,
     },
     contentTitle: {
          paddingTop: 12,
     },
     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 },

});