import React, { Component } from 'react'
import { StyleSheet, View, Text } 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 { getAgentNetworksList } from "../../webservice/NetworkApi";
import Icon from "./History";
import { Header } from "react-native-elements";
let theme = require('./../../utils/theme.json')
const route = require("./../../route.json")
export default 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 {
               colorback = 'green'
               typesta = 2
               sta = I18n.t('ACTION_TREAT_DEMAND')
          }
          this.state = {
               statut: sta,
               user: null,
               networks: [],
               loadingTreat: false,
               color: colorback,
          }
          readUser().then(async (user) => {
               let networks = []
               networks = await getAgentNetworksList(user.agentId);
               this.setState({ user: user, networks: networks.networks })

          })
     }

     render() {

          let ago = moment.tz(this.item.date_creation, 'Etc/GMT+0').format();
          ago = moment(ago)
          return (
               <View style={this.styles.container}>
                    <CardView
                         style={this.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={this.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={this.styles.simpleuser}>{this.item.code_membre}</Text>
                         </View>
                    </CardView>
                    <CardView
                         style={this.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={this.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={this.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={this.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={this.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>)
     }
     styles = StyleSheet.create({
          container: {
               flex: 1,
          },
          btnstyle: {

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

     onTreatDemand() {
          if (this.item !== "1") {
               this.setState({ loadingTreat: true })
               console.warn(this.item);
               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);
                    }
               })
          }
     }

     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.state.loadingTreat}
                              onPress={() => {
                                   this.onTreatDemand()
                              }}
                              textStyle={this.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.state.loadingTreat}
                                        onPress={() => {
                                             this.onTreatDemand()
                                        }}
                                        textStyle={this.styles.textbtnstyle}
                                   >
                                        {this.state.statut}
                                   </Button>
                              </View>

                              <View style={{
                                   flex: 1,
                                   alignItems: 'center'
                              }}>
                                   <Button
                                        style={{
                                             borderColor: 'transparent',
                                             borderRadius: 6,
                                             marginLeft: 5,
                                             marginRight: 5,
                                             backgroundColor: '#ccc'
                                        }}
                                        isLoading={this.state.loadingTreat}
                                        onPress={() => {
                                             this.props.navigation.pop();
                                        }}
                                        textStyle={this.styles.textbtnstyle}
                                   >
                                        {I18n.t('QUIT')}
                                   </Button>
                              </View>
                         </View>)
                    }
               }
          }
     }
}