import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Alert,
    Platform,
    ScrollView,
    ProgressBarAndroid,
    TouchableOpacity, Image, ActivityIndicator
} from 'react-native'
import CheckBox from '@react-native-community/checkbox';
import CardView from 'react-native-cardview'
import Button from 'apsl-react-native-button'
import {responsiveFontSize, responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {updateCreditDemand} from "../../../webservice/HistoryRequestApi";
import {readUser} from "../../../webservice/AuthApi";

let typesta = 0
let moment = require('moment-timezone')
var colorback = 'white'
import I18n from "react-native-i18n";
import {treatCreditDemand, creditDemandResetReducer} from '../../../webservice/CreditTreatDemandApi';
import {treatCancelDemand, creditCancelResetReducer} from '../../../webservice/CreditCancelDemandeApi';
import {getAgentNetworksList} from "../../../webservice/NetworkApi";
import {Header} from "react-native-elements";

let theme = require('../../../utils/theme.json');
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Toast from 'react-native-root-toast';
import {Color} from '../../../config/Color'
import isNil from 'lodash/isNil';
import isEqual from 'lodash/isEqual';
import _ from "lodash";

const route = require("../../../route.json");
import Dialog from "react-native-dialog";
import {FontWeight, Typography} from '../../../config/typography'
import DeviceInfo from 'react-native-device-info'
import {getNanoCreditUniqueDemandsAction, getNanoCreditUniqueDemandsReset} from '../../../webservice/user/NanoCreditApi'
import {treatDemandGroupAction, treatDemandGroupReset, cancelDemandGroupAction} from '../../../webservice/NanoCreditApi'
import {IlinkEmitter} from '../../../utils/events';
import * as Animatable from "react-native-animatable";
import {Dropdown} from "react-native-material-dropdown-v2";
import {Fumi, Sae} from "react-native-textinput-effects";
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
import {
    getOrdreRecetteReset,
    getOrdreRecetteWithoutQuitanceAction,
    modifyAvisImpositionReset,
    modifyQuitanceAction,
    saveQuitanceAction
} from "../../../webservice/regisseur/WalletRegisseurApi";
import ImagePicker from "react-native-image-crop-picker";
import axios from "axios";
import {getOneReceiptUrl, getOneTaxNoticeUrl, uploadImage} from "../../../webservice/IlinkConstants";
import {ProgressDialog} from "react-native-simple-dialogs";
import {store} from "../../../redux/store";
import WebView from "react-native-webview";
import {fetchPaymentMethods, fetchPaymentMethodsReset} from "../../../redux/payment/payment.action";

class NumeroQuitanceDetail extends Component {

    static navigatorStyle = {
        navBarBackgroundColor: theme.accentLight,
        statusBarColor: theme.accent,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF',
    };

    static navigationOptions = ({navigation}) => {

        return {
            drawerLabel: () => null,
            title: navigation.getParam("isModify", false) ? I18n.t('QUITANCE')
                : I18n.t('QUITANCE'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 40,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
        }
    };

    constructor(props) {
        super(props);
        this.dataToSendTemp = new FormData();
        this.state = {
            displayAmountModifyDialog: false,
            /* statut: sta, */
            user: null,
            networks: [],
            loadingTreat: false,
            loadingCancel: false,
            triggerTreatmentClick: false,
            triggerCancelClick: false,
            color: colorback,
            montant: null,
            image: null,
            isBtnModifyAmountEnabled: false,
            id: this.props.navigation.getParam("id", null),
            item: this.props.navigation.getParam("item", null),
            items: this.props.navigation.getParam("items", null),
            codeAgent: this.props.navigation.getParam("codeAgent", null),
            password: null,
            isModify: this.props.navigation.getParam("isModify", false),
            assign_network: false,
            displayImage: false,
            loadingUpload: false,
            revenue_orders_id: [],
            deleted_revenue_orders: [],
            added_revenue_orders: [],
            added_revenue_orders_items: [],
            displayAddOrdreRecette: false,
            ordreRecetteId: this.props.navigation.getParam("isModify", false) ? this.props.navigation.getParam("item", "-").id_receipt : "",
            paymentMethods: [
                {
                    title: I18n.t('WALLET'),
                    value: 'wallet'
                },
                {
                    title: I18n.t('CASH'),
                    value: 'cash'
                },
            ],
            paymentMethod: 'wallet',
            paymentUrl: '',
            displayPaymentModal: false
        };
        this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
        this.props.modifyAvisImpositionReset();

        this.props.fetchPaymentMethods();
        moment.locale(this.currentLocale);
        this.webviewRef = null;

        if (this.state.isModify)
            this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 1);

    }

    createFormData = (photo) => {
        this.dataToSendTemp.append("image", {
            name: photo.path.split('/').pop(),
            type: photo.mime,
            uri:
                Platform.OS === "android" ? photo.path : photo.path.replace("file://", "")
        });

    };

    uploadImage = () => {
        axios({
            url: `${uploadImage}`,
            method: 'POST',
            data: this.dataToSendTemp,
            headers: {
                'X-Localization': I18n.currentLocale(),
                'Content-Type': 'multipart/form-data'
            },
        })
            .then(response => {
                console.log(response);
                this.setState({image: response.data.response.filename, loadingUpload: false});
            })
            .catch(error => {
                console.log(error);
                if (error.response)
                    console.log(error.response);
                else if (error.request)
                    console.log(error.request);
                else
                    console.log(error.message);

                Alert.alert("", I18n.t('TITLE_ERROR_SURVENU'), [{
                    text: "Ok",
                    onPress: () => {
                    }
                }]);
                this.setState({loadingUpload: false});
            });
    };

    renderDialogAddOrdreRecette = () => {

        const {resultGetAvisImposition, errorGetAvisImposition} = this.props;
        console.log("resultGetAvisImposition", resultGetAvisImposition);
        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={this.state.displayAddOrdreRecette}>

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

                <ScrollView style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                    {
                        Array.isArray(resultGetAvisImposition.response) && (resultGetAvisImposition.response.length) > 0 ?

                            resultGetAvisImposition.response.map((item) => (
                                this.renderOrdreRecetteItem(item)
                            )) :
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                <Text style={Typography.body1}>{I18n.t('NO_ORDRE_RECETTE')}</Text>
                            </View>

                    }
                </ScrollView>

                <Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
                    this.setState({
                        displayAddOrdreRecette: false,
                        item: {
                            ...this.state.item
                        }

                    }, () => {
                        console.log("STATE", this.state);
                    });

                }}/>
            </Dialog.Container>
        )
    }

    renderDialogImage = () => {

        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={this.state.displayImage}>

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

                <View>
                    <View style={{width: 50}}/>
                    <View style={{justifyContent: 'center', alignContent: 'center', alignItems: 'center'}}>
                        <Image source={{uri: this.state.image.path}} style={{
                            width: this.state.image.width, height: this.state.image.height, aspectRatio: 1,
                            resizeMode: 'contain'
                        }}/>
                    </View>
                    <View style={{width: 50}}/>
                </View>

                <Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
                    this.setState({
                        displayImage: false,
                        loadingUpload: true
                    });
                    this.uploadImage();

                }}/>
            </Dialog.Container>
        )
    }

    renderImageLoader = () => {
        return (
            <ProgressDialog
                visible={this.state.loadingUpload}
                title={I18n.t('LOADING')}
                message={I18n.t('UPLOAD_PHOTO')}
            />
        )
    };

    componentDidMount() {

        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    this.setState({user});
                }
            }
        });

    }

    componentWillReceiveProps(nextProps, nextContext) {

        if (nextProps.paymentMethod !== null) {
            if (nextProps.paymentMethod.result !== null) {
                console.log("nextProps.paymentMethod", nextProps.paymentMethod);
                const paymentsMethods = [
                    {
                        title: I18n.t('WALLET'),
                        value: 'wallet'
                    },
                    {
                        title: I18n.t('CASH'),
                        value: 'cash'
                    },
                ]
                this.setState({
                    paymentMethods: [...paymentsMethods, ...nextProps.paymentMethod.result.response.methods]
                })
            }
        }
    }

    displayToast = (message) => {
        Toast.show(message, {
            duration: Toast.durations.LONG,
            position: Toast.positions.BOTTOM,
            backgroundColor: Color.primaryColor,
            shadow: true,
            animation: true,
            hideOnPress: true,
            delay: 0,
            onShow: () => {
                // calls on toast\`s appear animation start
            },
            onShown: () => {
                // calls on toast\`s appear animation end.
            },
            onHide: () => {
                // calls on toast\`s hide animation start.
            },
            onHidden: () => {
                // calls on toast\`s hide animation end.
            }
        });
    }

    ckeckIfFieldIsOK(champ) {
        return (isNil(champ) || isEqual(champ.length, 0));
    }

    checkPaymentStatus = (webViewState) => {
        console.log("URL", webViewState.url);
        if (webViewState.url.includes('webhook')) {
            this.setState({displayPaymentModal: false})
        }
    };

    refreshScreen = (id) => {
        const auth = store.getState().authKeyReducer;
        const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
        axios({
            url: `${getOneReceiptUrl}/${id}`,
            method: 'GET',
            headers: {
                'Authorization': authKey,
                'X-Localization': I18n.currentLocale()
            }
        })
            .then(response => {
                console.log("RESPONSE", response);
                this.setState({
                    item: response.data.response
                });
            })
            .catch(error => {
                let message = "";
                if (error.response)
                    message = error.response
                else if (error.request)
                    message = error.request
                else
                    message = error.request;

                Alert.alert(
                    I18n.t("ERROR_LABLE"),
                    message.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                            }
                        }
                    ],
                    {cancelable: false}
                )
            });
    }

    renderModifyResponse = () => {
        const {errorModifyAvis, resultModifyAvis, resultCancelDemand, errorCancelDemand} = this.props;

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

        if (resultModifyAvis !== null) {
            console.log("resultModifyAvis", resultModifyAvis);
            if (resultModifyAvis.status === 200) {
                if (!this.state.isModify) {
                    if (this.state.paymentMethod !== 'wallet') {
                        const {password, item, taxes, assign_network, ordreRecetteId, image} = this.state;
                        this.props.modifyAvisImpositionReset();
                        try{
                            this.props.navigation.push('webviewScreen', {
                                url: resultModifyAvis.response.payment_url,
                                id_agent: this.state.user.agentId,
                                id_receipt: ordreRecetteId,
                                image,
                                item,
                                password: password,
                                payment_method: this.state.paymentMethod,
                                payment_phone: this.state.user.phone,
                                revenue_orders: this.state.revenue_orders_id,
                                deleted_revenue_orders: this.state.deleted_revenue_orders,
                                added_revenue_orders: this.state.added_revenue_orders
                            });
                        } catch(error) {
                            console.log('error', error);
                        }


                    } else {
                        Alert.alert(
                            I18n.t("SUCCESS"),
                            resultModifyAvis.response,
                            [
                                {
                                    text: I18n.t("OK"), onPress: () => {
                                        this.props.modifyAvisImpositionReset();
                                        this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 1);
                                        console.log("ITEM STATE", this.state.item);
                                        //this.refreshScreen(this.state.item.id);
                                    }
                                }
                            ],
                            {cancelable: false}
                        );
                    }
                }
            }

            if (resultModifyAvis.status === 201) {

                readUser().then((user) => {
                    if (user) {
                        if (user !== undefined) {
                            if (this.state.isAgentGeolocated) {
                                this.props.getOrdreRecetteWithoutQuitanceAction(user.phone, 0);
                            }
                        }
                    }
                });

                if (!this.state.isModify) {
                    if (this.state.paymentMethod === 'wallet') {
                        Alert.alert(
                            I18n.t("SUCCESS"),
                            resultModifyAvis.response,
                            [
                                {
                                    text: I18n.t("OK"), onPress: () => {
                                        this.props.modifyAvisImpositionReset();
                                        this.props.getOrdreRecetteReset();
                                        this.setState({
                                            ordreRecetteId: "",
                                            password: null,
                                            items: this.state.items.filter(
                                                function (e) {
                                                    console.log(e);
                                                    return this.indexOf(e.id) < 0;
                                                },
                                                this.state.revenue_orders_id
                                            ),
                                            revenue_orders_id: [],

                                        })
                                        //this.refreshScreen(this.state.item.id);
                                    }
                                }
                            ],
                            {cancelable: false}
                        );
                    }
                }
            }
        }
    }

    renderLabelState = (state) => {
        if (state === 0)
            return I18n.t('NO_TREAT')
        else if (state === 1)
            return I18n.t('TREAT')
        else
            return I18n.t('REFUSED')
    }

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

    renderModalPayment = () => {
        return (

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

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

                <View>
                    <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                        <View style={styles.containModal}>
                            <WebView
                                source={{uri: this.state.paymentUrl}}
                                style={{flex: 1}}
                                ref={ref => {
                                    this.webviewRef = ref;
                                }}
                                javaScriptEnabled
                                domStorageEnabled
                                onNavigationStateChange={webViewState => {
                                    this.checkPaymentStatus(webViewState);
                                }}
                                renderLoading={() => (
                                    <ActivityIndicator size="small"/>
                                )}
                                startInLoadingState
                            />
                        </View>
                    </View>

                </View>

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

                }}/>

            </Dialog.Container>

        );
    }

    renderOrdreRecetteItem = (item) => {
        let dateFormat = moment.tz(item.created_at, moment.tz.guess()).format();
        dateFormat = moment(dateFormat).fromNow();

        return (
            <View
                style={styles.checkboxContainer}>

                <CheckBox
                    tintColors={{true: '#69f', false: '#ccc'}}
                    onValueChange={value => {
                        const {added_revenue_orders, added_revenue_orders_items} = this.state;
                        let temp_added_revenue_orders_items = added_revenue_orders_items;
                        let temp_added_revenue_orders = added_revenue_orders;

                        if (value) {
                            if (!temp_added_revenue_orders.includes(item.id)) {
                                temp_added_revenue_orders_items.push(item);
                                temp_added_revenue_orders.push(item.id);
                            }

                        } else {
                            console.log("Valeur fausse");
                            temp_added_revenue_orders_items = temp_added_revenue_orders_items.filter(element => element.id !== item.id);
                            temp_added_revenue_orders.filter(element => element !== item.id);
                        }

                        this.setState({
                            added_revenue_orders: temp_added_revenue_orders,
                            added_revenue_orders_items: temp_added_revenue_orders_items,
                        }, () => {
                            console.log("STATE", this.state)
                        })
                    }}
                    value={this.state.added_revenue_orders.includes(item.id)}
                    style={styles.checkbox}/>

                <View style={styles.paymentItem}>
                    <View>
                        <Text style={styles.title}>{item.id_revenue_order}</Text>

                        <View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
                            <Text style={{
                                fontWeight: 'bold',
                                marginLeft: 20,
                                marginBottom: 0,
                            }}>
                                {`${item.amount}`}
                            </Text>
                        </View>

                    </View>
                </View>

            </View>
        )
    }

    renderDetail = () => {

        return (
            <ScrollView style={styles.container}>

                {this.state.paymentMethod === 'cash' && (
                    <Animatable.View ref={(comp) => {
                        this.ordreRecetteAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'file'}
                              label={I18n.t('NUMERO_QUITANCE')}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              value={"" + this.state.ordreRecetteId}
                              onChangeText={(ordreRecetteId) => {
                                  this.setState({ordreRecetteId})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>
                )}

                <View style={{
                    alignSelf: 'center',
                    marginTop: 5,
                    width: responsiveWidth(90)
                }}>
                    {!this.state.isModify ?
                        this.state.items.map(item => (
                            <View
                                style={styles.checkboxContainer}>

                                <CheckBox
                                    tintColors={{true: '#69f', false: '#ccc'}}
                                    onValueChange={value => {
                                        let {revenue_orders_id} = this.state;
                                        if (value)
                                            revenue_orders_id.push(item.id);
                                        else {
                                            if (revenue_orders_id.includes(item.id)) {
                                                revenue_orders_id = revenue_orders_id.filter((element) => element !== item.id);
                                            }
                                        }
                                        this.setState({revenue_orders_id}, () => {
                                            console.log("LE STATE", this.state)
                                        });
                                    }}
                                    value={this.state.revenue_orders_id.includes(item.id)}
                                    style={styles.checkbox}/>

                                <View style={styles.paymentItem}>
                                    <View style={styles.content}>
                                        <Text style={styles.title}>{item.id_revenue_order}</Text>

                                        <Text
                                            style={styles.description}>{`${I18n.t('NUMERO_AVIS_IMPOSITION')}: ${item.id_tax_notice}`}</Text>

                                        <Text
                                            style={styles.description}>{`${item.tax_name}`}</Text>

                                        <View style={styles.timeContent}>
                                            <View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
                                                <Text style={{
                                                    fontWeight: 'bold',
                                                    marginLeft: 20,
                                                    marginBottom: 10,
                                                }}>
                                                    {`${item.amount}`}
                                                </Text>

                                                <View
                                                    style={{
                                                        alignContent: 'flex-start',
                                                        flexDirection: 'row',
                                                        marginLeft: 20
                                                    }}>
                                                    <Icon name="clock"
                                                          style={[styles.descriptionIcon, {color: Color.accentColor, marginTop: 5}]}/>
                                                    <Text
                                                        style={styles.time}>{moment(moment.tz(item.created_at, moment.tz.guess()).format()).fromNow()}</Text>
                                                </View>

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

                            </View>
                        )) :
                        this.state.item.revenue_orders.concat(this.state.added_revenue_orders_items).map(item => (
                            <View
                                style={styles.checkboxContainer}>

                                <CheckBox
                                    tintColors={{true: '#69f', false: '#ccc'}}
                                    onValueChange={value => {
                                        let {revenue_orders_id} = this.state;
                                        if (value)
                                            revenue_orders_id.push(item.id);
                                        else {
                                            if (revenue_orders_id.includes(item.id)) {
                                                revenue_orders_id = revenue_orders_id.filter((element) => element !== item.id);
                                            }
                                        }
                                        this.setState({revenue_orders_id}, () => {
                                            console.log("LE STATE", this.state)
                                        });
                                    }}
                                    value={this.state.revenue_orders_id.includes(item.id)}
                                    style={styles.checkbox}/>

                                <View style={{width: 25}}>
                                    <TouchableOpacity
                                        style={[styles.contain, {
                                            backgroundColor: Color.accentColor,
                                            alignItems: "center",
                                            justifyContent: "center",
                                            position: "absolute",
                                            width: 25,
                                            zIndex: 10,
                                            top: 50,
                                            height: 25,
                                            borderRadius: 11}]}
                                        onPress={() => {
                                            Alert.alert(
                                                I18n.t("TITLE_SUPPRESS_CONFIRM"),
                                                I18n.t("TEXT_SUPPRESS_CONFIRM_TAXE"),
                                                [
                                                    {
                                                        text: I18n.t("SUBMIT_LABEL"), onPress: () => {
                                                            console.log("ITEM DELETE", item);

                                                            console.log("Array concat", this.state.item.revenue_orders.concat(this.state.added_revenue_orders_items));

                                                            if ((this.state.item.revenue_orders.concat(this.state.added_revenue_orders_items)).length === 1) {
                                                                Alert.alert(
                                                                    I18n.t("ERROR_LABEL"),
                                                                    I18n.t("YOU_CANT_DELETE_LAST_TAX_NOTICE"),
                                                                    [
                                                                        {
                                                                            text: I18n.t("OK"),
                                                                            onPress: () => {
                                                                            }
                                                                        }
                                                                    ]
                                                                );
                                                            } else {
                                                                let itemState = this.state.item.revenue_orders;
                                                                let taxes = _.pull(itemState, item);
                                                                const {
                                                                    deleted_revenue_orders,
                                                                    added_revenue_orders_items
                                                                } = this.state;
                                                                let temp_deleted_revenue_orders = deleted_revenue_orders;
                                                                let temp_added_revenue_orders_items = added_revenue_orders_items;

                                                                temp_added_revenue_orders_items = temp_added_revenue_orders_items.filter(element => element.id !== item.id);
                                                                if (!temp_deleted_revenue_orders.includes(item.revenue_order_id)) {
                                                                    temp_deleted_revenue_orders.push(item.revenue_order_id);
                                                                }

                                                                itemState.taxes = taxes;
                                                                this.setState({
                                                                    item: {...this.state.item, revenue_orders: taxes},
                                                                    deleted_revenue_orders: temp_deleted_revenue_orders,
                                                                    added_revenue_orders_items: temp_added_revenue_orders_items
                                                                });
                                                            }

                                                        }
                                                    },
                                                    {
                                                        text: I18n.t("CANCEL_LABEL")
                                                    }
                                                ],
                                                {cancelable: false}
                                            );

                                        }}
                                        activeOpacity={0.9}>
                                        <View>
                                            <View>
                                                <Icon name={'minus'} color={Color.whiteColor} size={20}/>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                </View>


                                <View style={styles.paymentItem}>
                                    <View style={styles.content}>
                                        <Text style={styles.title}>{item.id_revenue_order}</Text>

                                        <Text
                                            style={styles.description}>{`${I18n.t('NUMERO_AVIS_IMPOSITION')}: ${item.id_tax_notice}`}</Text>

                                        <Text
                                            style={styles.description}>{`${item.tax_name}`}</Text>

                                        <View style={styles.timeContent}>
                                            <View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
                                                <Text style={{
                                                    fontWeight: 'bold',
                                                    marginLeft: 20,
                                                    marginBottom: 10,
                                                }}>
                                                    {`${item.amount}`}
                                                </Text>

                                                <View
                                                    style={{
                                                        alignContent: 'flex-start',
                                                        flexDirection: 'row',
                                                        marginLeft: 20
                                                    }}>
                                                    <Icon name="clock"
                                                          style={[styles.descriptionIcon, {color: Color.accentColor, marginTop: 5}]}/>
                                                    <Text
                                                        style={styles.time}>{moment(moment.tz(item.created_at, moment.tz.guess()).format()).fromNow()}</Text>
                                                </View>

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

                            </View>
                        ))


                    }
                </View>

                {
                    !this.state.isModify && this.state.paymentMethod === 'cash' && (
                        <View style={[styles.contentPicker]}>
                            <TouchableOpacity
                                style={[styles.contain]}
                                onPress={() => {
                                    ImagePicker.openCamera({
                                        width: 400,
                                        height: 281,
                                        cropping: true,
                                        useFrontCamera: false
                                    }).then(image => {
                                        this.createFormData(image);
                                        this.setState({image, displayImage: true});
                                    })
                                }}
                                activeOpacity={0.9}>
                                <View style={[styles.contcontainerCenterentLeft]}>
                                    <View>
                                        <Icon name='image' color={Color.blueColor}
                                              style={[styles.thumb]} size={80}/>
                                        <View style={[styles.point, {backgroundColor: Color.accentColor}]}>
                                            <Icon name='camera-image' color={Color.whiteColor} size={20}/>
                                        </View>
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <Text
                                style={[Typography.footnote, FontWeight.semibold, {color: Color.whiteColor}]}>{I18n.t('IMAGE_TAKE')}</Text>
                        </View>
                    )

                }

                <Dropdown
                    disabled={this.props.paymentMethod.loading}
                    label={I18n.t("PAYMENT_METHOD")}
                    style={styles.input}
                    labelExtractor={(item, index) => {
                        return item.title
                    }}
                    valueExtractor={(item, index) => {
                        return item.value
                    }}
                    onChangeText={(value, index, data) => {
                        this.setState({paymentMethod: value})
                    }}
                    data={this.state.paymentMethods}
                />

                <Animatable.View ref={(comp) => {
                    this.passwordAnim = comp
                }}>
                    <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                          label={I18n.t('PASSWORD')}
                          iconColor={'#f95a25'}
                          iconSize={20}
                          secureTextEntry={true}
                          value={this.state.password}
                          onChangeText={(password) => {
                              this.setState({password})
                          }}
                          style={styles.input}
                    >
                    </Fumi>
                </Animatable.View>

                <View style={{
                    flexDirection: 'row',
                    paddingTop: 10
                }}>
                    <View style={{
                        flex: 1,
                        alignItems: 'center'
                    }}>
                        <Button
                            style={{
                                borderColor: 'transparent',
                                borderRadius: 6,
                                marginLeft: 5,
                                marginRight: 5,
                                backgroundColor: 'green'
                            }}
                            isLoading={this.props.loadingModifyAvis}
                            onPress={() => {
                                this.setState({loadingModifyAvis: true});
                                this.onSubmitModificationAvisImposition();
                            }}
                            disabled={true}
                            textStyle={styles.textbtnstyle}
                        >
                            {this.state.isModify ? I18n.t('MODIFY') : I18n.t('PAY')}
                        </Button>
                    </View>

                    {
                        this.state.isModify &&
                        <View style={{
                            flex: 1,
                            alignItems: 'center'
                        }}>
                            <Button
                                style={{
                                    borderColor: 'transparent',
                                    borderRadius: 6,
                                    marginLeft: 5,
                                    marginRight: 5,
                                    backgroundColor: Color.primaryColor
                                }}
                                isLoading={false}
                                onPress={() => {
                                    this.setState({
                                        displayAddOrdreRecette: true
                                    });
                                }}
                                textStyle={styles.textbtnstyle}
                            >
                                {I18n.t('ADD_ORDRE_RECETTE')}
                            </Button>
                        </View>
                    }
                </View>


            </ScrollView>);
    }

    onSubmitModificationAvisImposition = () => {
        const {password, item, taxes, assign_network, ordreRecetteId, image} = this.state;
        if (this.ckeckIfFieldIsOK(password)) {
            this.passwordAnim.shake(200);
        } else if (this.state.paymentMethod === 'cash' && this.ckeckIfFieldIsOK(ordreRecetteId)) {
            this.ordreRecetteAnim.shake(200);
        } else {
            let dataToSubmit = {}

            if (this.props.paymentMethod.result !== null) {
                if (!this.props.paymentMethod.result.response.hasWebview) {
                    dataToSubmit = {
                        payment_method: "wallet",
                        id_agent: this.state.user.agentId,
                        id_receipt: ordreRecetteId,
                        image,
                        password: password,
                        revenue_orders: this.state.revenue_orders_id,
                        deleted_revenue_orders: this.state.deleted_revenue_orders,
                        added_revenue_orders: this.state.added_revenue_orders
                    }
                } else {
                    dataToSubmit = {
                        id_agent: this.state.user.agentId,
                        id_receipt: ordreRecetteId,
                        image,
                        password: password,
                        payment_method: this.state.paymentMethod,
                        payment_phone: this.state.user.phone,
                        revenue_orders: this.state.revenue_orders_id,
                        deleted_revenue_orders: this.state.deleted_revenue_orders,
                        added_revenue_orders: this.state.added_revenue_orders
                    }
                }
            }

            if (this.state.isModify) {
                this.props.modifyQuitanceAction(item.id, dataToSubmit);
            } else
                this.props.saveQuitanceAction(dataToSubmit, true);
        }
    }

    render() {

        return (
            <>
                {this.renderModifyResponse()}
                {this.state.displayImage && this.renderDialogImage()}
                {this.state.displayPaymentModal && this.renderModalPayment()}
                {this.state.displayAddOrdreRecette && this.renderDialogAddOrdreRecette()}
                {this.state.loadingUpload && this.renderImageLoader()}
                {
                    this.renderDetail()
                }
            </>
        );
    }


}

const mapStateToProps = state => ({
    loadingGetUniqueDemand: state.getUniqueDemandsGroupReducer.loading,
    resultGetUniqueDemand: state.getUniqueDemandsGroupReducer.result,
    errorGetUniqueDemand: state.getUniqueDemandsGroupReducer.error,

    loadingGetAvisImposition: state.getAvisImpositionReducer.loading,
    resultGetAvisImposition: state.getAvisImpositionReducer.result,
    errorGetAvisImposition: state.getAvisImpositionReducer.error,

    loadingModifyAvis: state.modifyAvisImpositionReducer.loading,
    resultModifyAvis: state.modifyAvisImpositionReducer.result,
    errorModifyAvis: state.modifyAvisImpositionReducer.error,

    paymentMethod: state.paymentMethodsReducer
});

const mapDispatchToProps = dispatch => bindActionCreators({
    getNanoCreditUniqueDemandsAction: getNanoCreditUniqueDemandsAction,
    getNanoCreditUniqueDemandsReset: getNanoCreditUniqueDemandsReset,

    treatDemandGroupAction: treatDemandGroupAction,
    cancelDemandGroupAction: cancelDemandGroupAction,
    treatDemandGroupReset: treatDemandGroupReset,

    treatCreditDemand: treatCreditDemand,
    creditDemandResetReducer: creditDemandResetReducer,

    treatCancelDemand: treatCancelDemand,
    creditCancelResetReducer: creditCancelResetReducer,

    saveQuitanceAction,
    modifyAvisImpositionReset,
    getOrdreRecetteWithoutQuitanceAction,

    getOrdreRecetteReset,

    modifyQuitanceAction,

    fetchPaymentMethods,
    fetchPaymentMethodsReset

}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(NumeroQuitanceDetail);

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    btnstyle: {},
    containModal: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputAmountText: {
        ...Platform.select({
            android: {
                borderBottomColor: Color.borderColor,
                borderBottomWidth: 0.5,
            }
        })
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
    },
    simpleuser: {
        marginLeft: responsiveWidth(2),
        fontSize: 16,
        color: '#3E3E3E'
    },
    textbtnstyle: {
        color: "white",
        fontWeight: "bold",
        fontSize: 18
    },
    input: {
        height: 60,
        marginTop: responsiveHeight(2),
        marginLeft: responsiveWidth(5),
        marginRight: responsiveWidth(5),
        borderRadius: 5,
        borderWidth: 1
    },
    cardcontainer1: {
        justifyContent: 'space-evenly',
        flex: 2,
        marginRight: 3,
        marginLeft: 3,

    },
    cardcontainer: {
        margin: 3,
        marginTop: 25
    },
    checkboxContainer: {
        flexDirection: "row",
        marginBottom: 20,
    },
    checkbox: {
        alignSelf: "center",
        color: "white"
    },
    contentPicker: {
        padding: 10,
        paddingBottom: 0,
        marginBottom: 0,
        borderRadius: 8,
        flex: 1,
        alignItems: "center"
    },
    contain: {flexDirection: "row"},
    thumb: {
        borderRadius: 30,
        marginRight: 10
    },
    point: {
        width: 25,
        height: 25,
        borderRadius: 11,
        alignItems: "center",
        justifyContent: "center",
        position: "absolute",
        right: 9,
        bottom: 0
    },
    paymentItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        width: "100%",
        borderBottomColor: '#EEE',
        borderBottomWidth: 1
    },
    listStyle: {
        backgroundColor: 'white'
    },
    bottomSeparator: {
        width: responsiveWidth(100),
        height: 5,
        justifyContent: 'center',
        alignSelf: 'center',
        backgroundColor: '#EEE',
    },
    description: {
        fontSize: responsiveFontSize(1.8),
        color: '#4f5b62',
        marginLeft: 20,

    },
    timeContent: {
        justifyContent: 'space-between',
        flex: 1,
        marginBottom: 2,
        flexDirection: 'row',
    },
    time: {
        fontWeight: 'bold',
        marginRight: 20,
        marginBottom: 10,
        color: theme.accent,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    dateText: {
        marginTop: 20,
        marginLeft: responsiveWidth(13),
        marginBottom: 20,
        fontSize: 17,
    },
    titlecontent: {
        fontSize: 17,
        marginLeft: responsiveWidth(10),
        color: 'black'
    },
    title: {
        fontSize: 20,
        marginLeft: 20,
        marginTop: 5,
        color: 'black',
        fontWeight: 'bold'
    },
})