import React,{Component} from 'react';
import {StyleSheet,View,Text,Image,StatusBar,ScrollView} 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,generateAgentGeo} 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 Notification from "react-native-in-app-notification";
require('./../../utils/Translations')
const height=responsiveHeight(100)-250;
import {Navigation} from "react-native-navigation"
export default class GenerateNetworkForGeo extends  Component {
    static navigatorStyle = {
        navBarHidden: true,
        navBarBackgroundColor: theme.primaryDark,
        navBarTextColor: 'white',
        navBarButtonColor: 'white',
        drawUnderStatusBar: true,
        statusBarColor: theme.primaryDarkAdvanced,
        statusBarTextColorScheme: 'light',
    };
    static options(passProps){
        return {
            statusBar:{
                drawBehind:false
            },
            topBar:{

                title:{
                    text:"",
                },
                buttonColor:"white",
                background:{
                    color:theme.primaryDark
                }
            }
        }
    }
    constructor(props) {
        super(props)
        this.state=this.generateState();
    }

    render(){
        return (
            <View style={{
                flex:1,backgroundColor:theme.primary}}>
                <Button style={style.btnHelp} textStyle={style.btnHelpText}>?</Button>
                <View style={style.container}>
                    <View style={style.appContainer}>
                        <Image source={require('../../assets/img/icon.png')} style={style.logo}/>
                        <Text style={style.nameApp}>iLink World</Text>
                    </View>
                    <Text style={style.title}>Créer un agent Géolocalisé </Text>
                    <Text style={style.subtitle}>Définir son nouveau numéro</Text>
                    <Fumi
                        label={"numero"}
                        iconClass={FontAwesomeIcon}
                        iconName={'phone'}
                        iconColor={'white'}
                        // TextInput props
                        style={style.input}
                        autoCapitalize={'none'}
                        autoCorrect={false}
                        value={this.state.enterPhone}
                        inputStyle={{color:'black'}}
                        ref={(com)=>{this.numberRef=com}}
                        onChangeText={(text)=>this.setState({enterPhone:text})}
                        labelStyle={style.labelInput}
                    />
                    <Button isLoading={this.state.isLoading} style={style.btnStyle} textStyle={style.btnTextStyle} onPress={()=>this.onGenerateGeo()}>Créer !</Button>

                </View>
                <Notification style={{marginTop:responsiveHeight(10)}} ref={(ref) => { this.notification = ref; }} />

            </View>)
    }

    async onGenerateGeo() {
        const {enterPhone}=this.state;
        this.setState({isLoading:true})
        if(enterPhone!==null && enterPhone!==undefined){
          let result= await generateAgentGeo(enterPhone);
          console.log(result);

            this.setState({isLoading:false})
          if(result['success']!==undefined){
                this.setState({enterPhone:""})
              this.notification.show({
                  message:"Le nouveau point geolocalisé a été crée avec succès"
              })
          }else{
              this.setState({isLoading:false})
              this.notification.show({
                  title:'Impossible de créer le compte',
                  message:result.error_msg
              })
          }
        }
    }

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

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',
        backgroundColor:theme.primary},
    input:{
        height:responsiveHeight(8),
        width:responsiveWidth(90),
        borderRadius:10,
        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'
    }
})