import React,{Component} from 'react';
import {StyleSheet,View,Text,Image,StatusBar,ScrollView,Alert} from 'react-native';
import { Fumi } from 'react-native-textinput-effects';
import * as Animatable from 'react-native-animatable'
let theme=require('./../../utils/theme.json');
import I18n from 'react-native-i18n'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5'
import {readUser,AssignAgentGeo} from './../../webservice/AuthApi';
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import MapView,{Marker} from 'react-native-maps';
import Icon from 'react-native-vector-icons/FontAwesome5'
import Button from 'apsl-react-native-button'
import {IlinkEmitter} from "../../utils/events";
require('./../../utils/Translations')
const route=require('./../../route.json')
/*var Fabric = require('react-native-fabric');

var { Crashlytics } = Fabric;
var { Answers } = Fabric;*/
export default class AddNetwork extends  Component {
    static navigatorStyle = {
        navBarBackgroundColor: theme.primaryDark,
        navBarTextColor: 'white',
        navBarButtonColor: 'white',
        drawUnderStatusBar: false,
        statusBarColor: theme.primaryDarkAdvanced,
        statusBarTextColorScheme: 'light',
    };
    static navigationOptions = ({navigation})=>{
        return {
            drawerLabel:navigation.getParam("name",I18n.t('ADD_NETWORK')),
        drawerIcon: ({ tintColor }) => (
            <Icon
                name={'user'}
                size={24}
            />
        ),
    }};

    updateLangue(){

        this.props.navigation.setParams({name:I18n.t('CHANGE_INFORMATION')})
        this.forceUpdate()
    }
    static options(passProps){
        return {
            topBar:{
                title:{
                    text:"",
                },
                backButton: {
                    visible: true,
                    color:"white"
                },
                buttonsRight:[],
                buttonColor:"white",
                background:{
                    color:theme.primaryDark
                }
            }
        }
    }
    constructor(props) {
        super(props)
        this.state=this.generateState()
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
    }


    generateState() {
        return {
            isLoading:false,
            notifi:false
        }
    }

    render(){
        return (
            <View style={style.container}>
                <StatusBar
                    backgroundColor="#00000030"
                    barStyle="light-content"
                    translucent={true}
                />
            <ScrollView style={{flex:1 ,paddingTop:30}}>
            <View style={style.appContainer}>
                <Image source={require('./../../datas/img/icon3.png')}
                    style={{width:responsiveWidth(90),resizeMode:"contain"}}/>
            </View>
                <Text style={style.title}>{I18n.t('ADD_NETWORK')}</Text>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={"code"}
                      labelStyle={style.labelInput}
                      inputStyle={{color:'black'}}
                      value={this.state.validateCode}
                      label={I18n.t('SPONSOR_CODE')}
                      onChangeText={(text)=>this.setState({validateCode:text})}
                      style={style.input}/>

                <Fumi
                    label={I18n.t('PHONE')}
                    iconClass={FontAwesomeIcon}
                    iconName={'phone'}
                    iconColor={'white'}
                    style={style.input}
                    autoCapitalize={'none'}
                    keyboardType={"phone-pad"}
                    autoCorrect={false}
                    value={this.state.enterPhone}
                    inputStyle={{color:'black'}}
                    ref={(com)=>{this.numberRef=com}}
                    onChangeText={(text)=>this.setState({enterPhone:text})}
                    labelStyle={style.labelInput}
                />
           <Button style={style.btnStyle} textStyle={style.btnTextStyle}
                   isLoading={this.state.isLoading} onPress={()=>this.validateNetwork()}
           >{I18n.t('VALIDATE')}</Button>
            </ScrollView>

            </View>)
    }

    async validateNetwork() {
        const {validateCode,isLoading,enterPhone}=this.state
        if(validateCode!==undefined && validateCode!==null && enterPhone!==null){
            this.setState({isLoading:true})
            let res=await AssignAgentGeo(validateCode,enterPhone)
            this.setState({isLoading:false})
            if(res){
                if(res['success']!==undefined){
                    Alert.alert(
                        I18n.t('ADD_SUCCES'),
                        I18n.t('ADD_SUCCESS_TEXT')
                    ,     [
                        {text: 'OK', onPress: () =>{
                            this.setState({validateCode:"",enterPhone:""})
                        }}
                    ])
                }else{

                    if(res['error']) {
                        let error = res["error"];
                        Alert.alert("Une erreur est survenu",
                            res["error_msg"]
                            , [{
                                text: "Ok", onPress: () => {
                                }
                            }]);
                    }else{
                        if(res['error']) {
                            let error = res["error"];
                            Alert.alert("Une erreur est survenu",
                                "Verifier que les champs sont bien rempli" 
                                , [{
                                    text: "Ok", onPress: () => {
                                    }
                                }]);
                        }
                    }
                 /*   Crashlytics.recordError({"type":"erreur lors de la creation","data":res})
                    Answers.logCustom("error",res)*/
                }
            }
        }
    }
}
const style=StyleSheet.create({
    btnHelpText:{
        color:'white',
        fontWeight:'bold'
    },
    btnHelp:{
        width:responsiveWidth(10),
        marginTop:responsiveHeight(10),
        alignSelf:'flex-end',
        marginRight:20,
        borderColor:'transparent',
        backgroundColor:theme.primaryDark
    },
    btnTextStyle:{
        color:"white",
        fontWeight:'bold',
    },
    btnStyle:{
        alignSelf:'center',
        width:responsiveWidth(95),
        marginTop:20,
        borderColor:'transparent',
        backgroundColor:theme.primaryDarkAdvanced,
        height:responsiveHeight(8)

    },
    appContainer:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    },
    container:{
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        flex:1,
        width:responsiveWidth(100),
        height:responsiveHeight(100),
        backgroundColor:theme.primary},
    input:{
        height:responsiveHeight(10),
        width:responsiveWidth(90),
        borderRadius:10,
        marginTop:20,
        color:"black"
    },
    logo:{
        width:128,
        height:128
    },
    nameApp:{
        fontSize:27,
        fontWeight:'bold',
        color:'white'
    },
    title:{
        fontSize:22,
        fontWeight:'bold',
        margin:10,

        color:'white'
    },
    subtitle:{
        fontSize:20,
        margin:10,
        color:'white'
    }
})