import React, {Component} from 'react'
import {Alert, Platform, StyleSheet, Text, View} from 'react-native'
import CardView from 'react-native-cardview'
import Button from 'apsl-react-native-button'
import {responsiveWidth} from 'react-native-responsive-dimensions'
import Icons from 'react-native-vector-icons/Ionicons'
import {readUser} from "../../webservice/AuthApi";
import isNil from 'lodash/isNil';
import {creditDemandResetReducer, treatCreditDemand} from '../../webservice/CreditTreatDemandApi';
import {creditCancelResetReducer, treatCancelDemand} from '../../webservice/CreditCancelDemandeApi';
import {getAgentNetworksList} from "../../webservice/NetworkApi";
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Toast from 'react-native-root-toast';
import {Color} from '../../config/Color'
import Dialog from "react-native-dialog";
import {FontWeight} from '../../config/typography'
import I18n from "react-native-i18n";

import 'moment/locale/fr';
import 'moment/locale/es-us';
import 'moment/locale/en-au';
import 'moment/locale/en-ca';
import 'moment/locale/en-ie';
import 'moment/locale/en-il';
import 'moment/locale/en-nz';

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

let typesta = 0;

var colorback = 'white'

let theme = require('./../../utils/theme.json');

const route = require("./../../route.json");

class HistoryItemDetails extends Component {

    static navigatorStyle = {
        navBarBackgroundColor: theme.accentLight,
        statusBarColor: theme.accent,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF',
    };
    static navigationOptions = ({navigation}) => {
        return {
            drawerLabel: () => null,
            title: isNil(navigation.getParam("item", null).item) ?
                "Transaction N°" + navigation.getParam("item", {id: "-"}).id :
                "Transaction N°" + navigation.getParam("item", {id: "-"}).item.id
        }
    };

    constructor(props) {
        super(props);
        this.item = this.props.navigation.getParam("item", null);
        if (isNil(this.props.navigation.getParam("item", null).item)) {
            this.item = this.props.navigation.getParam("item", null);
        } else {
            this.item = this.props.navigation.getParam("item", null).item;
        }

        this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
        moment.locale(this.currentLocale);

        let sta = ''
        if (this.item.status === '1') {
            typesta = 1
            colorback = '#AEAEAE'
            sta = I18n.t('TREAT_DEMAND')
        } else if (this.item.status === '0') {
            colorback = 'green'
            typesta = 2
            sta = I18n.t('ACCEPTER_DEMANDE')
        } else {
            colorback = '#AEAEAE'
            typesta = 2
            sta = I18n.t('REFUSED')
        }

        this.state = {
            displayAmountModifyDialog: false,
            statut: sta,
            user: null,
            networks: [],
            loadingTreat: false,
            loadingCancel: false,
            triggerTreatmentClick: false,
            triggerCancelClick: false,
            color: colorback,
            montant: null,
            isBtnModifyAmountEnabled: false
        }
        readUser().then(async (user) => {
            let networks = []
            networks = await getAgentNetworksList(user.agentId);
            this.setState({user: user, networks: networks.networks})
        });

    }

    isNormalInteger = (str) => {
        return (/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(str)) ? false : true;

    }

    isMontantValid = () => {
        const {montant} = this.state;
        if ((parseInt(montant) == 0 || montant < 0))
            return false;

        else if (!this.isNormalInteger(montant))
            return false;

        else if (parseInt(montant) > parseInt(this.item.montant))
            return false;

        else
            return true;
    }

    displayToast = (message) => {
        Toast.show(message, {
            duration: Toast.durations.SHORT,
            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.
            }
        });
    }

    onTreatDemand() {
        if (this.item !== "1") {
            this.props.creditDemandResetReducer();
            this.props.treatCreditDemand(this.item.id);
            /* updateCreditDemand(this.item.phone, this.item.id).then((data) => {
                 this.setState({ loadingTreat: false })
                 console.log(data);

                 if (data.success === 1) {
                      this.setState({ statut: I18n.t('TREAT_DEMAND'), color: "#AEAEAE" })
                 } else {
                      console.log(data);
                 }
            }) */
        }
    }

    onCancelDemand = () => {
        if (this.item !== "1") {
            this.props.treatCancelDemand(this.item.id);
        }
    }

    renderPromptModifyAmountToSend = () => {
        return (
            <Dialog.Container useNativeDriver={true} visible={this.state.displayAmountModifyDialog}>

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

                <Dialog.Description style={[FontWeight.bold]}>
                    {I18n.t('ENTER_NEW_AMOUNT_TO_SEND')}
                </Dialog.Description>

                <Dialog.Input style={styles.inputAmountText}
                              value={this.state.montant}
                              keyboardType="numeric"
                              onChangeText={(montant) => {

                                  this.setState({montant}, () => {
                                      if (this.isMontantValid(montant)) {
                                          this.setState({
                                              isBtnModifyAmountEnabled: true
                                          })
                                      } else
                                          this.setState({
                                              isBtnModifyAmountEnabled: false
                                          });

                                      console.log("this.isMontantValid().isValid", this.isMontantValid());
                                      console.log("isBtnModifyAmountEnabled", this.state.isBtnModifyAmountEnabled);
                                  });

                              }}/>

                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')}
                               onPress={() => this.setState({displayAmountModifyDialog: false})}/>
                <Dialog.Button bold={true} label={I18n.t('SEND')} disable={this.state.isBtnModifyAmountEnabled}
                               onPress={() => {
                                   this.props.creditDemandResetReducer();
                                   this.props.treatCreditDemand(this.item.id, this.state.montant);
                               }}/>
            </Dialog.Container>
        )
    }

    renderAlertErrorTreatOrCancelDemand = () => {
        const {errorTreatDemand, resultTreatDemand, resultCancelDemand, errorCancelDemand} = this.props;

        if (errorTreatDemand !== null) {
            if (typeof errorTreatDemand.data !== 'undefined') {
                if (errorTreatDemand.status === 426) {
                    Alert.alert(
                        I18n.t("ERROR_TREATMENT_DEMAND"),
                        errorTreatDemand.data.error,
                        [{
                            text: I18n.t('CANCEL_LABEL'),
                            onPress: () => {
                            },
                            style: 'cancel'
                        },
                            {
                                text: I18n.t("OK"), onPress: () => {
                                    setTimeout(() => {
                                        this.setState({
                                            displayAmountModifyDialog: true
                                        });
                                    }, 10);
                                    this.props.creditDemandResetReducer();
                                    this.props.creditCancelResetReducer();
                                }
                            }],
                        {cancelable: false}
                    );
                } else {
                    Alert.alert(
                        I18n.t("ERROR_TREATMENT_DEMAND"),
                        errorTreatDemand.data.error,
                        [
                            {
                                text: I18n.t("OK"), onPress: () => {
                                    this.props.creditDemandResetReducer();
                                    this.props.creditCancelResetReducer();
                                }
                            }
                        ],
                        {cancelable: false}
                    );
                }
            }
        }

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

        if (resultTreatDemand !== null) {
            console.log("resultTreatDemand", resultTreatDemand);
            if (resultTreatDemand.status === 200) {
                this.displayToast(resultTreatDemand.response);
                this.props.navigation.goBack();
                if (!isNil(this.props.navigation.state.params.onGoBack))
                    this.props.navigation.state.params.onGoBack();
                this.props.creditCancelResetReducer();
                this.props.creditDemandResetReducer();
            }
        }

        if (resultCancelDemand !== null) {
            console.log("resultCancelDemand", resultCancelDemand);
            if (resultCancelDemand.status === 200) {

                this.displayToast(resultCancelDemand.response);
                this.props.navigation.goBack();
                if (!isNil(this.props.navigation.state.params.onGoBack))
                    this.props.navigation.state.params.onGoBack();
                this.props.creditCancelResetReducer();
                this.props.creditDemandResetReducer();

            }
        }

    }

    renderBtn() {
        const {user} = this.state;
        console.warn("ITEM ITEM", this.item);
        console.warn("Code Membre", user.code_membre);
        if (user) {
            if (this.item.code_parrain === user.code_membre) {
                if (this.item.status === '1') {
                    return (<Button
                            style={{
                                borderColor: 'transparent',
                                borderRadius: 6,
                                marginLeft: 5,
                                marginRight: 5,
                                backgroundColor: this.state.color
                            }}
                            isLoading={this.props.loadingTreatDemand}
                            onPress={() => {
                            }}
                            disabled={true}
                            textStyle={styles.textbtnstyle}
                        >
                            {this.state.statut}
                        </Button>
                    )
                } else if (this.item.status === '2') {
                    return (<Button
                            style={{
                                borderColor: 'transparent',
                                borderRadius: 6,
                                marginLeft: 5,
                                marginRight: 5,
                                backgroundColor: this.state.color
                            }}
                            onPress={() => {
                            }}
                            disabled={true}
                            textStyle={styles.textbtnstyle}
                        >
                            {this.state.statut}
                        </Button>
                    )
                } else {
                    return (<View style={{
                        flexDirection: 'row',
                        paddingTop: 10
                    }}>

                        <View style={{
                            flex: 1,
                            alignItems: 'center'
                        }}>
                            <Button
                                style={{
                                    borderColor: 'transparent',
                                    borderRadius: 6,
                                    marginLeft: 5,
                                    marginRight: 5,
                                    backgroundColor: this.state.color
                                }}
                                isLoading={this.props.loadingTreatDemand}
                                onPress={() => {
                                    this.setState({
                                        triggerTreatmentClick: true
                                    });
                                    this.onTreatDemand()
                                }}
                                textStyle={styles.textbtnstyle}
                            >
                                {this.state.statut}
                            </Button>
                        </View>

                        <View style={{
                            flex: 1,
                            alignItems: 'center'
                        }}>
                            <Button
                                style={{
                                    borderColor: 'transparent',
                                    borderRadius: 6,
                                    marginLeft: 5,
                                    marginRight: 5,
                                    backgroundColor: Color.redColor
                                }}
                                isLoading={this.props.loadingCancelDemand}
                                onPress={() => {
                                    this.setState({
                                        triggerCancelClick: true
                                    });
                                    this.onCancelDemand();
                                }}
                                textStyle={styles.textbtnstyle}
                            >
                                {I18n.t('REFUSER_DEMANDE')}
                            </Button>
                        </View>
                    </View>)
                }
            }
        }
    }

    render() {
        console.log("CREDIT MANAGE PROPS", this.props);
        let ago = moment.tz(this.item.date_creation, moment.tz.guess()).format();
        ago = moment(ago);
        return (
            <View style={styles.container}>
                {this.renderPromptModifyAmountToSend()}
                {(this.state.triggerTreatmentClick || this.state.triggerCancelClick) && this.renderAlertErrorTreatOrCancelDemand()}
                <CardView
                    style={styles.cardcontainer1}
                ><Text style={{
                    fontSize: 17,
                    fontWeight: 'bold',
                    color: 'black',
                    marginLeft: responsiveWidth(5)
                }}>{I18n.t('MEMBER_INFO')}</Text>
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'flex-start'
                    }}>
                        <Icons name='md-call'
                               size={28}
                               color={theme.accent}
                               style={{
                                   marginLeft: 20
                               }}
                        />
                        <Text style={styles.simpleuser}>{this.item.phone}</Text>
                    </View>
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'flex-start'
                    }}>
                        <Icons name='md-person'
                               size={28}
                               color={theme.accent}
                               style={{
                                   marginLeft: 20
                               }}
                        />
                        <Text style={styles.simpleuser}>{this.item.code_membre}</Text>
                    </View>
                </CardView>
                <CardView
                    style={styles.cardcontainer}
                >
                    <Text style={{
                        fontSize: 17,
                        fontWeight: 'bold',
                        color: 'black',
                        marginLeft: responsiveWidth(5)
                    }}>{I18n.t('DEMAND_INFO')}</Text>
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'flex-start'
                    }}>
                        <Icons name='md-git-branch'
                               size={28}
                               color={theme.accent}
                               style={{
                                   marginLeft: 20
                               }}
                        />
                        <Text style={styles.simpleuser}>{this.item.code_parrain}</Text>
                    </View>
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'flex-start'
                    }}>
                        <Icons name='md-code-working'
                               size={28}
                               color={theme.accent}
                               style={{
                                   marginLeft: 20
                               }}
                        />
                        <Text style={styles.simpleuser}>{this.item.reseau}</Text>
                    </View>
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'flex-start'
                    }}>
                        <Icons name='md-wallet'
                               size={28}
                               color={theme.accent}
                               style={{
                                   marginLeft: 20
                               }}
                        />
                        <Text style={styles.simpleuser}>{this.item.montant}</Text>
                    </View>
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'flex-start'
                    }}>
                        <Icons name='md-calendar'
                               size={28}
                               color={theme.accent}
                               style={{
                                   marginLeft: 20
                               }}
                        />
                        <Text style={styles.simpleuser}>{ago.format(" Do MMMM YYYY à HH:mm")}</Text>
                    </View>
                    <View style={{
                        flexDirection: 'row',
                        alignSelf: 'flex-end',
                        marginRight: 20,
                        justifyContent: 'flex-start'
                    }}>
                        <Icons name='md-time'
                               size={28}
                               color={theme.accent}
                        />
                        <Text style={{
                            marginLeft: responsiveWidth(2),
                            fontSize: 16,
                            color: theme.accent

                        }}>{ago.fromNow()}</Text>
                    </View>
                </CardView>
                {this.state.user ? this.renderBtn() : null}
            </View>)
    }


}

const mapStateToProps = state => ({
    loadingTreatDemand: state.creditTreatDemandReducer.loadingTreatDemand,
    resultTreatDemand: state.creditTreatDemandReducer.resultTreatDemand,
    errorTreatDemand: state.creditTreatDemandReducer.errorTreatDemand,

    loadingCancelDemand: state.creditCancelDemandReducer.loadingCancelDemand,
    resultCancelDemand: state.creditCancelDemandReducer.resultCancelDemand,
    errorCancelDemand: state.creditCancelDemandReducer.errorCancelDemand
});

const mapDispatchToProps = dispatch => bindActionCreators({
    treatCreditDemand: treatCreditDemand,
    creditDemandResetReducer: creditDemandResetReducer,

    treatCancelDemand: treatCancelDemand,
    creditCancelResetReducer: creditCancelResetReducer
}, dispatch);

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    btnstyle: {},

    inputAmountText: {
        ...Platform.select({
            android: {
                borderBottomColor: Color.borderColor,
                borderBottomWidth: 0.5,
            }
        })
    },
    simpleuser: {
        marginLeft: responsiveWidth(2),
        fontSize: 16,
        color: '#3E3E3E'
    },
    textbtnstyle: {
        color: "white",
        fontWeight: "bold",
        fontSize: 18
    },
    cardcontainer1: {
        justifyContent: 'space-evenly',
        flex: 2,
        marginRight: 3,
        marginLeft: 3,

    },
    cardcontainer: {
        justifyContent: 'space-evenly',

        flex: 3,
        margin: 3,
    }
})