import React, {Component} from 'react';
import {
    ActivityIndicator,
    Alert,
    FlatList,
    Image,
    Platform,
    ProgressBarAndroid,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import {connectActionSheet} from '@expo/react-native-action-sheet'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
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 {Color} from '../../config/Color';
import {IlinkEmitter} from "../../utils/events";
import {Appbar, Provider} from 'react-native-paper';
import {readUser} from '../../webservice/AuthApi';
import {
    getNanoCreditAccountAction,
    getNanoCreditAccountReset,
    getNanoCreditUserHistoryAction,
    getNanoCreditUserHistoryReset
} from '../../webservice/user/NanoCreditApi';
import _ from 'lodash';
import Icons from 'react-native-vector-icons/Ionicons'
import {Typography} from '../../config/typography';
import LottieView from 'lottie-react-native';
import {
    cutString,
    cutStringWithoutDot,
    displayToast,
    displayTransactionType,
    nanoSanteHistoryLabel,
    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 {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {responsiveWidth} from 'react-native-responsive-dimensions';
import {getWalletDetailActivated} from "../../webservice/WalletApi";
import {getWalletTransactionHistoryUser} from "../../webservice/WalletTransactionHistoryApi";
import {getUserIdentificationAction} from "../../webservice/IdentificationApi";
import {store} from "../../redux/store";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
import {
    fetchGetConsultationReset,
    fetchGetDrugAppareilReset,
    fetchGetNetworkActsReset,
    fetchGetProviderClassReset,
    fetchGetSubscriptionListReset,
    fetchGetUserByIdQRCodeReset,
    fetchGetUserByNameOrNumberReset
} from "../../redux/insurance/insurance.actions";
import {
    facturerSoinAction,
    facturerSoinReset,
    getInvoiceHistoryAction,
    getInvoiceHistoryReset,
    getSoinHistoryAction
} from "../../webservice/NanoCreditApi";
import SpinnerOverlay from "../../components/SpinnerOverlayComponent";
import AccordionComponent from "../../components/AccordionComponent";

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

class WalletOptionSelect extends Component {

    constructor(props) {
        super(props);
        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: store.getState().getUserIdentificationReducer.result !== null ? store.getState().getUserIdentificationReducer.result.response.isIdentified : false,
            isNanoCredit: this.props.navigation.state.params.hasOwnProperty('isNanoCredit'),
            isNanoSante: this.props.navigation.state.params.hasOwnProperty('isNanoSante'),
            isNanoSanteAgent: this.props.navigation.state.params.hasOwnProperty('isNanoSanteAgent'),
            user: null,
            displayModalHistory: false,
            historyItemDetail: null,
            isDataHasLoaded: false,
            historyResult: [],
            page: 1,
            loadMore: false,
            historiqueDetailLabel: I18n.t('INVOICE')
        }
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this));


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

        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);

                            if(this.state.isNanoSanteAgent) {
                                this.props.getInvoiceHistoryAction(`?network_id=${user.network_id}&network_agent_id=${this.state.wallet.network_agent_id}&page=1&perPage=20`);
                            }
                        }
                    }
                    this.setState({user});
                }
            }
        });

        this.willFocus = this.props.navigation.addListener(
            'willFocus',
            payload => {
                readUser().then((user) => {
                    console.log("user",user);
                    this.setState({user});
                    if (user) {
                        if (user !== undefined) {
                            if (user.category === undefined) {
                                this.props.getNanoCreditAccountAction(user.id);
                                this.props.getNanoCreditUserHistoryAction(user.id, true);
                                //refresh wallet
                                this.props.getWalletDetailActivated(user.id, null);
                                this.props.getUserIdentificationAction(user.phone);
                                this.props.getWalletTransactionHistoryUser(user.id);
                            } else {
                                if (user.category === 'geolocated')
                                    this.props.getNanoCreditUserHistoryAction(this.state.wallet.id, false);
                            }
                        }
                    }

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

                });
            });
    }

    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({
                    balance_credit: result.response.balance_credit,
                    balance_epargne: result.response.balance_epargne,
                    user: {
                        ...this.state.user,
                        balance_credit: result.response.balance_credit,
                        balance_epargne: result.response.balance_epargne
                    },
                    isDataHasLoaded: true
                });
                console.log("AFTER", this.props);
            }
        }
    }

    componentDidMount() {
        const {resultInsuranceHistory, errorInsuranceHistory} = this.props;

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

        if (resultInsuranceHistory !== null) {
            if (resultInsuranceHistory.response !== null) {
                if(this.state.page < resultInsuranceHistory.response.last_page) {
                  this.setState({
                      historyResult: this.state.historyResult.concat(resultInsuranceHistory.response.data)
                  });
                }
                if(this.state.page === resultInsuranceHistory.response.last_page) {
                  this.setState({
                      page: this.state.page + 1,
                      historyResult: this.state.historyResult.concat(resultInsuranceHistory.response.data)
                  })
                }
            }
        }
    }

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

    redirectToRoute = (optionsParam) => {
        console.warn("Wallet Select Props", 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);
                },
            );
        } 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;
                case 'NANO_SANTE':
                    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) => {
        return (
            isOneElement ?
                <>
                    <View key={index} style={[styles.containerTouch]}>

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

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

                            }

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

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

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

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

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

                        <TouchableOpacity style={styles.contain}
                                          onPress={() => {
                                              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);

                                              } else
                                                  this.redirectToRoute(options);

                                          }}
                                          activeOpacity={0.9}>

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

                            }

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

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

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

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

        )
    };

    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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_credit, ' ')} ${this.state.wallet.currency_code}` : `${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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_epargne, ' ')} ${this.state.wallet.currency_code}` : `${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>
        </>
    );


    renderNanoSanteAccountDetail = (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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_credit, ' ')} ${this.state.wallet.currency_code}` : `${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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_epargne, ' ')} ${this.state.wallet.currency_code}` : `${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='credit-card' 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('ATTACH_ASSURANCE_CARD')}
                </Tag>

            </View>*/}
        </>
    );

    renderNanoSanteAgentAccountDetail = (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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_credit, ' ')} ${this.state.wallet.currency_code}` : `${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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_epargne, ' ')} ${this.state.wallet.currency_code}` : `${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={<FontAwesome5 name='money-check-alt' size={20} color={Color.whiteColor}
                                         style={{marginLeft: -15}}/>}
                     style={{
                         paddingRight: 10,
                         width: "70%",
                         borderRightWidth: 1,
                         borderRightColor: Color.whiteColor
                     }}
                     primary
                     onPress={() => {
                         this.props.facturerSoinAction(`?network_agent_id=${this.state.wallet.network_agent_id}`);
                         //this._scrollView.scrollToEnd();
                     }}>{'  ' + I18n.t('FACTURER_FEUILLES_SOINS')}
                </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}]}>
                                                    {I18n.t(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', 'montant_retire', 'type_historique', 'type_caution', 'id_demande', 'montant_rembourse', 'partiellement_rembourse', 'duree_mois', 'etat', 'interet', 'taxe', 'date_validation', 'date_remboursement_prevu', 'date_remboursement', 'id_user', 'id_wallet_agent', 'id_network', 'user', 'user_phone', 'agent', 'codeParrain'])).map((element, i) => (
                            <View style={{alignItems: 'center'}} key={i}>

                                <Text style={[Typography.overline, Color.grayColor, {marginTop: 4}]}>
                                    {
                                        isEqual(element, 'montant') ?
                                            `  ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
                                            : isEqual(element, 'date_creation') ?
                                                cutStringWithoutDot(item[element], 16)
                                                : item[element]
                                    }
                                </Text>
                            </View>
                        ))
                        :
                        Object.keys(omit(item, ['id', 'type', 'montant_retire', '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') ?
                                            `  ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
                                            : isEqual(element, 'date_creation') ?
                                                cutStringWithoutDot(item[element], 16)
                                                : item[element]
                                    }
                                </Text>
                            </View>
                        ))
                }
            </TouchableOpacity>
        );
    }

    renderNanoSanteHistoryItem = (item, index) => {

        return (
            <TouchableOpacity onPress={() => {
                this.setState({displayModalHistory: true, historyItemDetail: item})
            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                {
                    Object.keys(omit(item, ['created_at', 'currency_code', 'file_url', 'health_care_sheets', 'institution_code', 'institutation_name', 'insured_amount', 'insurer_amount', 'invoice_id',
                    'network_agent_id', 'network_id', 'period_end_at','period_start_at','updated_at'])).map((element, i) => (
                        <View style={{alignItems: 'center'}} key={i}>

                            <Text style={[Typography.overline, Color.grayColor, {marginTop: 4}]}>
                                {item[element]}
                            </Text>
                        </View>
                    ))
                }
            </TouchableOpacity>
        );
    }

    handleLoadMore = () => {
        this.props.getInvoiceHistoryReset();
        this.props.getInvoiceHistoryAction(`?network_id=${user.network_id}&insured_id=${user.agentId}&page=${this.state.page + 1}&perPage=20`);
        this.setState({
            page: this.state.page + 1
        });
    }

    renderFooterLoader = () => {

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

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

    renderNanoSanteHistoryList = () => {

        const {loadingInsuranceHistory, errorInsuranceHistory, resultInsuranceHistory} = this.props;
        return (
            <>
                <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
                    <Text
                        style={[Typography.title3, Typography.semibold]}>
                        {`${I18n.t('HISTORY')} ${this.state.historiqueDetailLabel}`}
                    </Text>
                    <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingBottom: 10}}>
                        <Tag primary
                             icon={<FontAwesome5 name='book-medical' size={20} color={Color.whiteColor}
                                                 style={{marginLeft: 15}}/>}
                             style={{
                                 paddingRight: 10,
                                 borderTopRightRadius: 0,
                                 borderBottomRightRadius: 0,
                                 borderRightWidth: 1,
                                 borderRightColor: Color.whiteColor
                             }}
                             onPress={() => {
                                this.setState({historiqueDetailLabel: I18n.t('INVOICE')});
                                 readUser().then((user) => {
                                     if (user) {
                                         if (user !== undefined) {
                                             if (user.category === 'geolocated')
                                                 this.props.getInvoiceHistoryAction(`?network_id=${user.network_id}&network_agent_id=${this.state.wallet.network_agent_id}&page=1&perPage=20`);
                                         }
                                     }
                                 });
                             }}/>
                        <Tag icon={<MaterialCommunityIcons name='medical-bag' size={20} color={Color.whiteColor}/>}
                             style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
                             primary
                             onPress={() => {
                                 this.setState({historiqueDetailLabel: I18n.t('SOINS')});
                                 this.props.getSoinHistoryAction(this.state.wallet.network_agent_id, 'ALL', '', '&pagination=true&page=1');
                             }}/>

                    </View>
                </View>
                {
                    loadingInsuranceHistory ?
                        this.renderLoader() :
                        (<>
                                <View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                                    {
                                        nanoSanteHistoryLabel().map((item, index) => (
                                            <View style={{alignItems: 'center'}} key={index}>
                                                <Icon name={item.icon} size={24} color={Color.primaryColor}/>
                                                <Text style={[Typography.overline, Color.grayColor, {marginTop: 4}]}>
                                                    {I18n.t(item.label)}
                                                </Text>
                                            </View>
                                        ))
                                    }
                                </View>
                                <FlatList
                                style={{flex: 1}}
                                ListEmptyComponent={() => {
                                    return (
                                        <Text>{I18n.t('NO_WALLET_HISTORY')}</Text>
                                    )
                                }}
                                data={this.state.historyResult}
                                keyExtractor={(item, index) => item.id}
                                renderItem={({item, index}) => (
                                    this.renderNanoSanteHistoryItem(item)
                                )}
                                onEndReached={() => {
                                    if (resultInsuranceHistory !== null) {
                                        if (this.state.page < resultInsuranceHistory.response.last_page) {
                                            this.setState({loadMore: true});
                                            this.handleLoadMore();
                                        }
                                    }
                                }}
                                onEndReachedThreshold={0.5}
                                ListFooterComponent={resultInsuranceHistory !== null ? this.state.page < resultInsuranceHistory.response.last_page ? this.renderFooterLoader() : null : null}
                            />
                        </>
                        )
                }
            </>
        );
    }

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

        return (

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

                <Dialog.Title>{I18n.t('HISTORY_DETAIL')}</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]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text style={[styles.body2]}>{I18n.t('CAUTION_TYPE')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type_caution}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + 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>
                            :
                            <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text style={[styles.body2]}>Type</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text style={[styles.body2]}>{I18n.t('ID_SAVINGS')}</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_epargne}</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text style={[styles.body2]}>Type</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + 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_WITHDRAWAL')}</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_retire + ' ' + 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]}>{isEqual(this.state.historyItemDetail.type, 'SIMPLE') ? I18n.t('NON_APPLICABLE') : this.state.historyItemDetail.date_fin}</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
                                    </View>
                                </View>
                            </View>

                        : historyItemDetail.hasOwnProperty('insured_amount') ?
                            <ScrollView persistentScrollbar={true}>
                                <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>

                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text tyle={[Typography.body2]}>{I18n.t('INVOICE')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <TouchableOpacity onPress={()=>{
                                                this.setState({
                                                    displayModalHistory: !this.state.displayModalHistory,
                                                });
                                                navigation.push('PDFViewerScreen', {url: `${historyItemDetail.file_url}`, title: ''});
                                            }}>
                                                <Text style={{color: "blue", textDecorationLine: 'underline', fontWeight: 'bold'}}>Facture.PDF</Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>

                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text style={[styles.body2]}>{I18n.t('INVOICE_ID')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.invoice_id}</Text>
                                        </View>
                                    </View>

                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text style={[styles.body2]}>Date</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.created_at}</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.amount}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text tyle={[Typography.body2]}>{I18n.t('MONTANT_ASSURANCE')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.insured_amount}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text tyle={[Typography.body2]}>{I18n.t('MONTANT_ASSURE')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.insurer_amount}</Text>
                                        </View>
                                    </View>
                                    <View style={{flexDirection: 'row', marginTop: 10}}>
                                        <View style={{flex: 1}}>
                                            <Text tyle={[Typography.body2]}>{I18n.t('INSTITUTE_NAME')}</Text>
                                        </View>
                                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                                            <Text
                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.institution_name}</Text>
                                        </View>
                                    </View>
                                        {
                                            this.state.historyItemDetail.health_care_sheets.map((history_care) => (
                                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                                    <AccordionComponent
                                                        title={I18n.t('FEUILLE_SOIN')}
                                                        description={`${I18n.t('ID')}: ${history_care.health_care_sheet_id}\
                                                        ${I18n.t('AMOUNT')}: ${history_care.amount}\
                                                        ${I18n.t('MONTANT_ASSURANCE')}: ${history_care.insurerAmount}\
                                                        ${I18n.t('MONTANT_ASSURE')}: ${history_care.insuredAmount}\
                                                        ${I18n.t('PATIENT')}: ${history_care.patient_firstname !== null ? history_care.patient_firstname : ''} ${history_care.patient_lastname !== null ? history_care.patient_lastname : ''}\
                                                        ${I18n.t('PRATICIEN')}: ${history_care.practitioner_firstname} ${history_care.practitioner_lastname}\
                                                        `}
                                                        open
                                                        style={{marginTop: 20, marginBottom: 10}}
                                                    />
                                                </View>
                                            ))
                                        }
                                </View>
                            </ScrollView>
                            : <ScrollView persistentScrollbar={true}>
                            <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text style={[styles.body2]}>Type</Text>
                                    </View>
                                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                                        <Text
                                            style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection: 'row', marginTop: 10}}>
                                    <View style={{flex: 1}}>
                                        <Text style={[styles.body2]}>{I18n.t('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 style={{flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'flex-end', paddingBottom: 10}}>
                        <Tag primary
                             icon={<FontAwesome5 name='book-medical' size={20} color={Color.whiteColor}
                                                 style={{marginLeft: 15}}/>}
                             style={{
                                 paddingRight: 10,
                                 width: 120,
                                 borderTopRightRadius: 0,
                                 borderBottomRightRadius: 0,
                                 borderRightWidth: 1,
                                 borderRightColor: Color.whiteColor
                             }}
                             onPress={() => {
                             }}>
                            {`   ${I18n.t('SOINS')}`}
                        </Tag>
                        <Tag icon={<MaterialCommunityIcons name='medical-bag' size={20} color={Color.whiteColor}/>}
                             style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
                             primary
                             onPress={() => {
                             }}>
                            {` ${I18n.t('SOUSCRIPTION')}`}
                        </Tag>

                    </View>
                </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>
        );
    }

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

    renderDialogFacturerSoin = () => {
        const {resultFacturerSoin, errorFacturerSoin} = this.props;

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

        if (resultFacturerSoin !== null) {
            if (resultFacturerSoin.response !== null) {
                Alert.alert(
                    I18n.t("SUCCESS"),
                    resultFacturerSoin.response,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.facturerSoinReset();
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }
    }

    render() {
        !this.state.isDataHasLoaded && this.renderResultGetNanoCreditAccount();
        return (
            <Provider>
                <View style={{flex: 1}}>
                    <SpinnerOverlay show={this.props.loadingFacturerSoin} />
                    {(this.props.resultFacturerSoin !== null || this.props.errorFacturerSoin !== null) && this.renderDialogFacturerSoin()}
                    <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={I18n.t(this.state.title)}
                            subtitle={I18n.t(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()
                                    : this.state.isNanoSante ?
                                        this.renderNanoSanteAccountDetail() :
                                        this.state.isNanoSanteAgent ?
                                            this.renderNanoSanteAgentAccountDetail() :
                                            <View style={{
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <LottieView
                                                    style={styles.lottie}
                                                    source={this.state.lottie.source}
                                                    autoPlay
                                                    loop={this.state.lottie.loop}
                                                />
                                            </View>
                            }

                        </View>
                        {
                            this.state.isNanoSante ?
                                this.state.options.map((item) => (
                                    <>
                                        <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
                                            <Text
                                                style={[Typography.title3, Typography.semibold]}>
                                                {I18n.t(item.title)}
                                            </Text>
                                        </View>
                                        {
                                            chunk(item.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>
                                            ))
                                        }

                                    </>
                                )) :
                                (<>
                                    <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>
                                        ))
                                    }
                                </>)
                        }
                        {/*this.state.isNanoSanteAgent && this.renderNanoSanteHistoryList()*/}

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

                        {this.state.user !== null ?
                            this.state.user.indicatif === '+241' && (this.state.type === 'DEPOT_USER' || this.state.type === 'RETRAIT_USER' || this.state.type === 'DEPOT' || this.state.type === 'RETRAIT') && <View
                                style={{
                                    width: '100%',
                                    marginTop: 20,
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    flexDirection: 'column'
                                }}>
                                <Image source={require('../../datas/img/miang-logo.png')}
                                       style={{width: 200, height: 200, borderRadius: 100, marginRight: 10}}/>
                                <Text style={{marginTop: 10}}>{I18n.t('MIANG_SLOGAN')}</Text>
                            </View> : null}

                    </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,

    loadingFacturerSoin: state.facturerSoinReducer.loading,
    resultFacturerSoin: state.facturerSoinReducer.result,
    errorFacturerSoin: state.facturerSoinReducer.error,

    loadingInsuranceHistory: state.insuranceHistoryReducer.loading,
    resultInsuranceHistory: state.insuranceHistoryReducer.result,
    errorInsuranceHistory: state.insuranceHistoryReducer.error,
});

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

    getNanoCreditUserHistoryAction,
    getNanoCreditUserHistoryReset,

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

    facturerSoinReset,
    facturerSoinAction,

    getInvoiceHistoryAction,
    getInvoiceHistoryReset,

    getSoinHistoryAction,

    getWalletDetailActivated,
    getUserIdentificationAction,
    getWalletTransactionHistoryUser
}, 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},

});
