import React,{Component} from 'react';
import {StyleSheet,View,Text,Image,StatusBar,ScrollView,ProgressBarAndroid,Alert} from 'react-native';
let theme=require('./../../utils/theme.json');
import {readUser,deleteUser} from './../../webservice/AuthApi';
import {getAgentNetworksList} from './../../webservice/NetworkApi'
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import MapView,{Marker} from 'react-native-maps';
import Icon from 'react-native-vector-icons/MaterialIcons'
import Button from 'apsl-react-native-button'
import CardView from "react-native-cardview";
import I18n from 'react-native-i18n'
import {Header} from 'react-native-elements'
import {IlinkEmitter} from "../../utils/events";
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'

require('./../../utils/Translations')
const height=responsiveHeight(100)-250;
/*
var Fabric = require('react-native-fabric');
var { Crashlytics } = Fabric;*/
export default class UserAccount extends  Component{
    static navigatorStyle = {
        navBarHidden:false,
        navBarBackgroundColor:theme.primaryDark,
        navBarTextColor:'white',
        navBarButtonColor:'white',
        drawUnderStatusBar: false,
        statusBarColor:theme.primaryDarkAdvanced,
        statusBarTextColorScheme: 'light',
    };
    static navigationOptions = ({navigation})=>{
        return {headerTitle:I18n.t('USER_ACCOUNT') ,
            headerStyle:{
            backgroundColor:theme.primary,
                paddingTop:10
            },
            headerTitleStyle:{
            color:"white"
            },
        drawerIcon: ({ tintColor }) => (
            <Icon
                name={'person'}
                size={24}
            />
        ),
    }};
    static options(passProps) {
        return {
            topBar: {
                drawBehind: false,
                visible: true,
                animate: true,
                buttonColor: 'white',
                background: {
                    color:theme.primaryDark ,
                },
                rightButtons:[]
            },
            backButton: {
                visible: true,
                color:"white"
            },
            buttonColor:"white",
            background:{
                color:theme.primaryDark
            },
            statusBar:{
                drawBehind: false,
                visible:true,
            }
        };
    }
    constructor(props){
        super(props)
        this.state=this.initState();
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
        readUser().then((user)=>{
            if(user!==null){this.setState({user:user})

            this.updateContent(user)}})
            

    }
    updateLangue(){

        this.props.navigation.setParams({name:I18n.t('USER_ACCOUNT')})
        this.forceUpdate()
    }
    updateContent(user){
    getAgentNetworksList(user.agentId).then((networks)=>{
       if(networks['success']!==undefined){
           this.setState({mynetworks:networks.networks})
       }

    });
        this.setState({user:user});
    }


    initState(){
        return {
            user: {},
            mynetworks:[]
        }


    }

    render() {

        let cat="";

        const {user}=this.state

        if(user.category!==undefined || user.category!==null)
        cat=user.category==='super'?I18n.t("ADMIN"):user.category==='hyper'?
            I18n.t("SUPER_ADMIN"):user.category==='geolocated'?
            I18n.t("GEOLOCATED"):I18n.t("SIMPLE_USER")
 return (
            <View style={styles.container}>
             <StatusBar
                    backgroundColor={theme.primaryDark}
                    barStyle="light-content"
                    translucent={false}
                />
                <ScrollView style={{
                    flex:1,
                    marginTop:-5
                }}>
                <View style={styles.userInformation}>
                    <ScrollView>
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                        <Image source={require('./../../datas/img/users/man.png')} style={{width:92,height:92}}/>
                    </View>
                        <View style={{flex:1,flexDirection:'row'}}>
                            {user.category===undefined || user.category===null?
                                this.getHeaderLeftProfil(user):this.getHeaderLeftAgentProfil(user)
                            }
                        <View style={{flex:user.category===undefined ||user.category===null?2:2}}>
                            <Text style={styles.textInformation} >{this.state.user.firstname}</Text>
                            <Text style={styles.textInformation} >{this.state.user.lastname}</Text>
                            {<Text style={{color:'white',fontSize:17,fontWeight:'bold',textAlign:'center'}}>{cat}</Text>
                            }

                        </View>
                            {user.category===undefined || user.category===null?
                                this.getHeaderRight(user)
                                :this.getHeaderRightAgent(user)}

                    </View>
                    </ScrollView>

                </View>
                <View style={styles.networkInformation}>

                    <Text style={{marginLeft:10,marginRight:10,marginTop:15,marginBottom:5,fontSize:17,
                        fontWeight:'bold',color:'black'}}>{I18n.t("ACCOUNT_INFO")}</Text>
                    <CardView style={{marginLeft:10,marginRight:10,paddingBottom:20}}>
                        <ScrollView>
                            {user.category!==undefined && user.category!==null?this
                                .addAgentInformation(user):null}
                            <Text style={styles.textInformation2}>
                                <Icon name={"location-on"} size={18}/>{"  "+this.state.user.country}</Text>

                            {user.balance!==undefined && user.balance!==null ?this.showBalance(user):null }
                            <Text style={styles.textInformation2}>
                                <Icon name={"mail"} size={18}/>{"  "+this.state.user.email}</Text>


                            <Text style={styles.textInformation2}>

                                <Icon name={"phone"} size={18}/>
                                {"  "+this.state.user.phone}</Text>
                            {this.showPhoneSup()}
                            <Text style={styles.textInformation2}>

                                <Icon name={"signal-cellular-4-bar"} size={18}/>
                                {"  "+this.state.user.network}</Text>
                        </ScrollView>
                    </CardView>

                    {user.category==='geolocated'?
                        (<Text style={{marginLeft:10,marginRight:10,marginTop:15,marginBottom:5,fontSize:17,fontWeight:'bold',color:'black'}}>{I18n.t("MY_NETWORK")}</Text>)

                        :null}
                    {user.category==='geolocated'?(this.state.mynetworks.length>0?this.state.mynetworks.map(item=>this.generateItemNetwork(item)):this.showLoader()):null}
                </View>
                </ScrollView>

            </View>
        )
    }
    showPhoneSup() {
        if(this.state.user.phoneTransaction!=undefined && this.state.user.phoneTransaction!=null) {

            return(  <Text style={styles.textInformation2}>

                    <Icon name={"phone"} size={18}/>
                    {"  " + this.state.user.phoneTransaction}</Text>
                )
        }
    }

    getHeaderLeftProfil(user) {
        return (<View style={{flex:2 }}>
                    <Text style={{color:'white',fontSize:15,fontWeight:'bold',textAlign:'center'}}>{I18n.t("NETWORK")}</Text>
                    <Text style={{color:'white',fontSize:15,textAlign:'center'}}>{user.network}</Text>
        </View>)
    }

    getHeaderRight(user) {
       return (<View style={{flex:0}}>
        </View>)
    }

    getHeaderRightAgent(user) {

    return (<View style={{flex:2}}>
            <Text style={{color:'white',fontSize:15,textAlign:'center',fontWeight:'bold'}}>{I18n.t("MEMBER_CODE")}</Text>
            <Text style={{color:'white',fontSize:13,textAlign:'center'}}>{user.code_membre}</Text>
        </View>)

    }

    getHeaderLeftAgentProfil(user) {
        return (<View style={{flex:2}}>
            <Text style={{color:'white',fontSize:15,fontWeight:'bold',textAlign:'center'}}>{I18n.t("NETWORK")}</Text>
            <Text style={{color:'white',fontSize:13,textAlign:'center'}}>{user.network}</Text>
        </View>)
    }

    addAgentInformation(user) {
        console.log(user)
        if(user.category==="geolocated") {
            (<View>
                <Text style={{marginLeft:10,marginTop:10,color:theme.primaryDark}}>
                    <Icon name={'code'} size={18} color={theme.primaryDark} style={{paddingRight:10}}/>
                    {" "+user.code_parrain}</Text>
            </View>)

        }else
        return (<View>

            <Text style={{marginLeft:10,marginTop:10,color:theme.primaryDark}}>
                <Icon name={'code'} size={18} color={theme.primaryDark} style={{paddingRight:10}}/>
                {" "+user.code_parrain}</Text>
            <View style={{flexDirection:'row',justifyContent:'space-between',width:responsiveWidth(90),marginRight:50}}>
            <Text style={{marginLeft:12,marginTop:10,color:theme.primaryDark}}>
                   <Icon name={"group-work"} color={theme.primaryDark} size={18}/>
                {"  "+((user.nbre_reseau===null || user.nbre_reseau===undefined)?0:user.nbre_reseau)+" "+I18n.t("FREE")}</Text>
                <Text style={{marginLeft:12,marginTop:10,color:theme.primaryDark}}>
                <Icon name={"book"} color={theme.primaryDark} size={18} />{"  "+((user.nbre_reseau===null || user.nbre_membre===undefined)?0:user.nbre_membre)+" "+I18n.t("SAVED")}</Text>
            </View>
        </View>)
    }

    mapUser(user) {
        const myPosition={latitude:parseFloat(user.latitude),longitude:parseFloat(user.longitude)}

        return (<MapView
                liteMode
                ref={(ref) => { this.mapRef = ref }}
                style={styles.map}
            >
                {this.state.myPosition!==undefined?
                    <Marker
                        title={"Vous êtes ici"}
                        minZoomLevel={10}
                        coordinate={{longitude:myPosition.longitude,latitude:myPosition.latitude}}
                    />:
                    null}
            </MapView>
        )
    }

    showBalance(user) {
        return   <Text style={styles.textInformation2}>
            <Icon name={"folder"} size={18}/>{"  "+this.state.user.balance+" "}</Text>

    }

    makeGeolocatedNetworkList() {

        return (<View>
            <Text style={{marginLeft:10,marginRight:10,marginTop:15,marginBottom:5,fontSize:17,fontWeight:'bold',color:'black'}}>Mes reseaux</Text>

        </View>)
    }

    generateItemNetwork(item) {
        return (
        
                <Card >

                <CardTitle 
                title={item.name}
                subtitle={item.phone}
                />
                <CardContent>
                    <View Style={{flex:1}}>
                    <Text style={styles.textInformation2}>
<Icon name={"code"} size={18}/>{"  "+item.code_membre+" "}</Text>
<Text style={styles.textInformation2}>
<Icon name={"people"} size={18}/>{"  "+item.code_parrain+" "}</Text>
                
                </View>
                </CardContent>
                <CardAction 
                separator={true} 
                inColumn={false}>
                <CardButton
                 onPress={() => {
                    Alert.alert(
                        I18n.t("TITLE_SUPPRESS_CONFIRM"),
                        I18n.t("TEXT_SUPPRESS_CONFIRM"),
                        [
                            {text: I18n.t('NO'), onPress: () =>{}},
                            {text: I18n.t("YES"), onPress: () => {
                                deleteUser(item).then(()=>{
                                    this.setState({isLoading:true})
                                    this.updateContent(this.state.user)
                                })
                            },
                                style: 'cancel'},
                        ],
                    )
                 }}
                 title={I18n.t('DELETE_GEOLOCATED_USER')}
                 color="crimson"
                />
                </CardAction>
                </Card>)
    }

    showLoader() {
        return (<View style={{height:responsiveHeight(20)}}><ProgressBarAndroid

                style={{justifyContent:"center",alignItems:"center"}}
        /></View>)
    }
}

const styles=StyleSheet.create({
    userInformation:{
        backgroundColor:theme.primary,
        flex:1,
        justifyContent:'center',
        paddingTop:responsiveHeight(2),
        paddingBottom:responsiveHeight(5)
        },
    map: {
        height: 200,
        marginRight:responsiveWidth(5),
        marginLeft:responsiveWidth(5),
        marginVertical: 10,
    },
    networkInformation:{
        width:responsiveWidth(100),
        backgroundColor:'#EEEEEE',
        flex:1
    },
    container:{
        flex:1,
        backgroundColor:'#EEEEEE',

    },
    textInformation:{
        fontSize:16,
        color:'white',
        textAlign:'center'
    },
    textInformation2:{
        fontSize:15,
        marginTop:7,
        color:theme.primaryDark,
        marginLeft:10,
    },
    textTitle:{
        fontSize:25,
        color:'white',
        fontWeight:'bold'
    },

    textTitle2:{
        fontSize:25,
        color:theme.primaryDark,
        fontWeight:'bold'
    }
});