import React, { Component } from 'react'
import { StyleSheet, View, Text, Alert, Platform } from 'react-native'
import CardView from 'react-native-cardview'
import Button from 'apsl-react-native-button'
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions'
import Icons from 'react-native-vector-icons/Ionicons'
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 Icon from "./History";
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'
const route = require("./../../route.json");
import Dialog from "react-native-dialog";
import { FontWeight } from '../../config/typography'
class HistoryItemDetails extends Component {

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

     constructor(props) {
          super(props);
          this.item = this.props.navigation.getParam("item", null);
          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') {
                    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 }
                    )
               }
          }

          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();
                    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();
                    this.props.navigation.state.params.onGoBack();
                    this.props.creditCancelResetReducer();
                    this.props.creditDemandResetReducer();

               }
          }

     }

     renderBtn() {
          const { user } = this.state
          console.warn("ITEM ITEM", this.item);
          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, 'Etc/GMT+0').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,
     }
})