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 Notification from "react-native-in-app-notification";
import {Navigation} from "react-native-navigation"
require('./../../utils/Translations')
const route=require('./../../route.json')
export default class IntersticielAds extends  Component {
    static navigatorStyle = {
        navBarBackgroundColor: theme.primaryDark,
        navBarTextColor: 'white',
        navBarButtonColor: 'white',
        drawUnderStatusBar: false,
        statusBarColor: theme.primaryDarkAdvanced,
        statusBarTextColorScheme: 'light',
    };

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


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

    render(){
        return (
            <View style={style.container}>
                <StatusBar
                    backgroundColor="#00000030"
                    barStyle="light-content"
                    translucent={true}
                />
                <ScrollView style={{flex:1}}>
                    <View style={style.appContainer}>
                        <Image source={require('./../../datas/img/icon.png')}
                               style={{width:128,height:128}}/>
                        <Text style={style.nameApp}>iLink World</Text>
                    </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{
                    Alert.alert("Une erreur est survenu",
                        "Verifiez que les champs sont correctement remplis"
                        ,[{text:"Ok",onPress:()=>{}}]);


                }
                console.log(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'
    }
})