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(this.item)
        if(user) {
            if (this.item.code_parrain===user.code_membre) {
                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>
                )
            }
        }
    }
}