import React, { Component } from 'react';
import {
    Modal,
    StyleSheet,
    Text,
    View,
    Image,
    ProgressBarAndroid,
    ScrollView,
    TouchableOpacity,
    Platform,
    PermissionsAndroid,
    Alert,
    FlatList,
    BackHandler
} from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { responsiveHeight,responsiveWidth,responsiveFontSize } from 'react-native-responsive-dimensions';
import {Fumi,Kaede} from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable';
import Button from 'apsl-react-native-button';
import MapView,{Marker} from 'react-native-maps';
import { Dropdown } from 'react-native-material-dropdown';
import isEqual from 'lodash/isEqual';
import {getPositionInformation} from './../../webservice/MapService';
import I18n from 'react-native-i18n'
import { material } from 'react-native-typography';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {getCountryNetwork,createGeolocatedAccount,createUserAccount,getTownInformationName,getListCountriesActive,getCodeInformation} from './../../webservice/AuthApi';
import {SinglePickerMaterialDialog,MultiPickerMaterialDialog,MaterialDialog} from "react-native-material-dialog";
import Geolocation from 'react-native-geolocation-service';
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000,useSignificantChanges:true };

let theme=require('./../../utils/theme.json');
let route=require('./../../route.json');
let country=require('./../../utils/country_code.json');
/*var Fabric = require('react-native-fabric');

var { Crashlytics } = Fabric;
var { Answers } = Fabric;*/
declare var google;
import Spinner from "react-native-loading-spinner-overlay"
const propTypes = {
    ...Marker.propTypes,
    coordinate: PropTypes.shape({
        latitude: PropTypes.number.isRequired,
        longitude: PropTypes.number.isRequired,
    }),
    children: PropTypes.node,
    geolocationOptions: PropTypes.shape({
        enableHighAccuracy: PropTypes.bool,
        timeout: PropTypes.number,
        maximumAge: PropTypes.number,
    }),
    heading: PropTypes.number,
    enableHack: PropTypes.bool,
};

const defaultProps = {
    enableHack: false,
    geolocationOptions: GEOLOCATION_OPTIONS,
};

export default class CreateUserStep2 extends Component{
    static navigatorStyle = {
        drawUnderNavBar: true,
        navBarHidden:true,
        drawUnderStatusBar: false,
        statusBarHidden: true,
        statusBarTextColorScheme: 'light',
    };

    static options(passProps){
        return {
            topBar:{
                visible:false,
                enabled:false,
                drawBehind: true,

            },
            statusBar:{
                drawBehind: true,
                enabled:false,
            }
        }
    }

    constructor(props) {
        super(props);
        const {navigation} = this.props;
        this.type = navigation.getParam("type", 0);
        this.user = navigation.getParam('user', null);
        this.state = this.initState();
    }
     retreiveCodeInformation(){
         const membre=this.state.user.member;
        return new Promise(async (resolve,reject)=>{
            let datas=await getCodeInformation(membre)
            resolve(datas)
        })
       
    }
    initState() {
        return {
            password: null,
            enterPhone: null,
            nameanim: null,
            networksinglePickerVisible:false,
            surnameanim: null,
            passwordanim: null,
            confirmpassanim: null,
            isLoging: false,
            countries:[],
            snackVisible: false,
            snackText: '',
            disableNetwork:false,
            networks:[],
            modalVisible:true,
            select_network:I18n.t("SELECT_NETWORK"),
            user: this.user

        }
    }

    render(){

        return this.type===1?this.renderUserGeoAccount():this.renderUserAccount()

    }

    async getNetworks(indicatif) {

        if (indicatif){
            let result={}
            try{
            result=await this.retreiveCodeInformation()
            const {category}=result
            }catch(e){
                result=false
            }
            console.log(result)
            if(result){
                if(result.child){
                    this.setState({disableNetwork:true})
                    if(result.network)
                    this.setState({modalVisible:false,networks:[result.network],
                        network:result.network,select_network:I18n.t("YOUR_NETWORK")})

                    else {
                        Alert.alert(I18n.t('TITLE_PROBLE_COME'),"Impossible de recuperer les informations du code parrain",[{text:"Revenir",onPress:()=>this.props.navigation.pop()}])
                    }
                }else{
                    console.log("need enable")
                    getCountryNetwork(indicatif).then((result) => {
                        this.reseaux = [];
                        let networks = result;

                        for(let prop in networks){
                            if(networks[prop]!==""){
                                this.reseaux.push(networks[prop]);
                            }

                        }
                        this.setState({networks:this.reseaux});
                        this.setState({modalVisible:false})

                    }, (err) => {
                        this.setState({modalVisible:false})
                        this.showErrorDialog()
                    });
                }
            }else{
                getCountryNetwork(indicatif).then((result) => {
                    this.reseaux = [];
                    let networks = result;
                    for(let prop in networks){
                        if(networks[prop]!==""){
                            this.reseaux.push(networks[prop]);
                        }
                    }
                    this.setState({networks:this.reseaux});
                    this.setState({modalVisible:false})

                }, (err) => {
                    this.setState({modalVisible:false})
                    this.showErrorDialog()
                });
            }


        } else {
            this.setState({modalDialog:false})
            Alert.alert("Une erreur est survenue","Impossible de récuperer des informations du pays verifier que votre gps est activé," +
                "et que vous êtes connecté à internet puis ressayer",[{text:"Recommencer",onPress:()=>{
                    this.setState({modalDialog:true})
                    this.watchLocation()
                }},{text:"Annuler",onPress:()=>{this.props.navigation.popToTop()}}])

        }

    }
    showErrorDialog(){
        this.setState({modalDialog:false})
        Alert.alert("Une erreur est survenue","Impossible de récuperer des informations du pays verifier que votre gps est activé," +
            "et que vous êtes connecté à internet puis ressayer",[{text:"Recommencer",onPress:()=>{
                this.watchLocation()
            }},{text:"Annuler",onPress:()=>{this.props.navigation.popToTop()}}])
    }

    componentDidMount() {

        this.mounted = true;
        const {type}=this.props;


            if (this.props.coordinate) return;

            if (Platform.OS === 'android') {
                this.requestCameraPermission();
            } else {
                this.watchLocation();
            }

    }

    async requestCameraPermission() {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                {
                    'title': 'Cool Photo App Camera Permission',
                    'message': 'Cool Photo App needs access to your camera ' +
                    'so you can take awesome pictures.'
                }
            )
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                this.watchLocation();
            } else {
                this.setState({modalDialog:false})
                Alert.alert("Echec à l'autorisation",
                    "L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
                    [{text:"Ok",onPress:()=>{
                            this.props.navigation.popToTop()                        }}])
            }
        } catch (err) {
            this.setState({modalDialog:false})
            Alert.alert("Une erreur est Survenue",
                "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
                [{text:"Ok",onPress:()=>{
                        BackHandler.exitApp()
                    }}])        }
    }

    async watchLocation() {
         Geolocation.getCurrentPosition((position) => {
        this.treatPosition(position)}, (e)=>{
            this.showErrorDialog()
        }, this.props.geolocationOptions);
        if(!this.watchID){
            Geolocation.watchPosition((position) => {this.treatPosition(position)},(e)=>{this.showErrorDialog()},this.props.geolocationOptions)
        }
    }
    treatPosition(position){
        const myLastPosition = this.state.myPosition;
        const myPosition = position.coords;

        if (!isEqual(myPosition, myLastPosition)) {
            getPositionInformation(myPosition).then((response)=>{
                if(response.results!==undefined){
                    if(response.results.length>0) {
                        let most = response.results[0]
                        let {address_components, formatted_address, place_id} = most
                        this.setState({address: address_components, textadress: formatted_address, place: place_id})

                        let results=response.results;
                        let shortcountry;
                        let mcountry;
                        for (let i=0; i < results[0].address_components.length; i++) {
                            for (let j=0; j < results[0].address_components[i].types.length; j++) {
                                if (results[0].address_components[i].types[j] === "country") {
                                    mcountry = results[0].address_components[i];
                                    shortcountry=mcountry.short_name;
                                    this.setState({shortCountry:mcountry.short_name,longCountry: mcountry.long_name})
                                }else if(results[0].address_components[i].types[j]==="locality"){
                                    const name=results[0].address_components[i].short_name;
                                    this.setState({townName:name});
                                    getTownInformationName(name).then((result)=>{
                                        let town=null;
                                        if(result instanceof Array){
                                            town=result[0];
                                        }else
                                            town=result;
                                        this.setState({town:town});
                                    })
                                }
                            }
                        }
                        getListCountriesActive().then((cnt)=>{
                            this.setState({countries:cnt})
                            console.debug(cnt,shortcountry);
                            var found=false
                            for (let i of cnt) {
                                if (i.code_country === shortcountry) {
                                    found=true
                                    this.setState({indicatif: i.code_dial,country:i.name})
                                    this.getNetworks(i.code_dial);
                                }
                            }
                            if(!found){
                                Alert.alert("Impossible de recupérer vos informations","Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs",[{text:"OK"}]);

                            }
                        })


                    }

                }
            }).catch((e)=>{
                this.showErrorDialog()
            });
            this.setState({ myPosition:myPosition });
            if(this.mapRef!==undefined && this.mapRef!==null) {
                this.mapRef.animateToCoordinate({
                    latitude: myPosition.latitude,
                    longitude: myPosition.longitude
                }, 1000);
                this.mapRef.animateToRegion({
                    latitude: myPosition.latitude,
                    longitude: myPosition.longitude,
                    latitudeDelta: 0.03,
                    longitudeDelta: 0.01,
                }, 1000)
            }
        }

    }
    componentWillUnmount() {
        this.mounted = false;
        // eslint-disable-next-line no-undef
        if (this.watchID) Geolocation.clearWatch(this.watchID);
    }
    renderUserGeoAccount() {

        return (
            <View  style={styles.container}>
                {this.prepareModal()}
                <View style={{flexDirection:'row'}}>
                <Icon.Button name={"keyboard-backspace"}
                color={"white"}
                size={24}
                backgroundColor={theme.primary}
                onPress={()=>this.props.navigation.pop()}
                />
                            <Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>

                </View>
            <ScrollView style={styles.container}>
            <View
                style={{width:responsiveWidth(90),
                    marginTop:20,
                    alignSelf:'center',
                    borderRadius:10,
                    paddingLeft:20,
                    paddingRight:20,
                    backgroundColor:'white'}}

            >
                <Dropdown
                    label={I18n.t('COUNTRY_CHOICE')}
                    data={this.state.countries}
                    useNativeDriver={true}
                    disabled={this.state.disableNetwork}

                    value={this.state.country===null?"":
                        this.state.country}
                    onChangeText={(value,index,data)=>{
                        this.setState({country:value,indicatif:value.code_dial,network:null})
                        this.getNetworks(value.code_dial)
                    }}
                    valueExtractor={(value)=>{return value.name}}
                    labelExtractor={(value)=>{return value.name}}
                />
            </View>
            <Animatable.View ref={(comp)=>{this.numanim=comp}}>
                <View style={{flexDirection:'row',flex:1}}>
                <Fumi iconClass={FontAwesomeIcon} iconName={'flag'}
                      value={this.state.indicatif}
                      enabled={false}
                      editable = {false}
                      onChangeText={(text)=>{
                          let phonenum=text+this.state.contact!==undefined?this.state.contact:"";
                          this.setState({indicatif:text,phone:phonenum})}}
                      style={{
                          width:responsiveWidth(30),
                          height:responsiveHeight(10),
                          alignSelf:'center',
                          marginTop:responsiveHeight(2),
                          marginLeft:responsiveWidth(5),
                          marginRight:responsiveWidth(5),
                          borderRadius:5,
                      }}
                />
                <View>
                <Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
                      placeholder={I18n.t('PHONE')}
                      iconColor={'#f95a25'}
                      ref={(comp)=>{this.num_input=comp}}
                      iconSize={20}
                      onChangeText={(text)=>{
                          let phonenumber=text
                          this.setState({phone:phonenumber,contact:text})}}
                      style={{

                          marginTop:responsiveHeight(2),
                          marginRight:responsiveWidth(5),

                          width:responsiveWidth(55),
                          borderRadius:5,
                      }}
                >
                </Fumi>
                <Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
                      placeholder={I18n.t('PHONE_TRANSACTION')}
                      iconColor={'#f95a25'}
                      ref={(comp)=>{this.num_input=comp}}
                      iconSize={20}
                      onChangeText={(text)=>{
                          let phonenumber=text
                          this.setState({phoneTransaction:phonenumber,contactTransaction:text})}}
                      style={{

                          marginTop:responsiveHeight(2),
                          marginRight:responsiveWidth(5),

                          width:responsiveWidth(55),
                          borderRadius:5,
                      }}
                >
                </Fumi>
                </View>
                </View>
            </Animatable.View>

            <Animatable.View  ref={(comp)=>{this.networkanim=comp}}>
                <View
                    style={{width:responsiveWidth(90),
                        marginTop:20,
                        alignSelf:'center',
                        borderRadius:10,
                        paddingLeft:20,
                        paddingRight:20,
                        backgroundColor:'white'}}

                >
                    <Button
                        style={{borderColor:'transparent'}}
                        isDisabled={this.state.disableNetwork}
                        onPress={()=>{
                         this.setState({networksinglePickerVisible:true})
                    }}>
                        <View>
                        <Text style={material.subheading}>{this.state.select_network}</Text>
                        <Text style={material.subheading}>{this.state.network?this.state.network.name:""}</Text>
                        </View>
                    </Button>

                </View>
            </Animatable.View>
            <Text
                style={{fontSize:16,
                    marginTop:10,
                    marginLeft:responsiveWidth(6),marginRight:responsiveWidth(6),color:'white',fontWeight:'bold'}}
            >{I18n.t('WAIT_LOADING_POSITION')}</Text>
            <Animatable.View
                ref={(comp)=>{this.mapanim=comp}}
            >
            <MapView
                liteMode
                ref={(ref) => { this.mapRef = ref }}
                style={styles.map}
            >
                {this.state.myPosition!==undefined?
                    <Marker
                    title={I18n.t('YOUR_THERE')}
                    minZoomLevel={18}
                    coordinate={{longitude:this.state.myPosition.longitude,latitude:this.state.myPosition.latitude}}
                    />:
                    null}
            </MapView>
            </Animatable.View>
            <TouchableOpacity style={{flexDirection:'row',alignItems:'center'}}>
                <Image

                    style={{width:24,height:24,
                        marginLeft:responsiveWidth(6)}}
                    source={require('./../../datas/img/userplace.png')}
                />
                <Text
                style={{fontSize:16,
                    marginTop:10,marginRight:responsiveWidth(6),color:'white',fontWeight:'bold'}}
            >{this.state.textadress!==undefined?this.state.textadress:I18n.t('TAKE_MY_POSITION')}</Text>
            </TouchableOpacity>
                <Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
                        isLoading={this.state.isLoading}
                        onPress={()=>{this.checkUserGeolocated()}}>{I18n.t('CREATE_ACCOUNT')}</Button>


        </ScrollView>
                <MaterialDialog
                    title={'Selecionner un reseau'}
                    items={LONG_LIST.map((row, index) => ({ value: row, label:row }))}
                    visible={this.state.networksinglePickerVisible}
                    selectedItem={this.state.singlePickerSelectedItem}
                    onCancel={() => this.setState({ networksinglePickerVisible: false })}
                    onOk={result => {
                        this.setState({ networksinglePickerVisible: false });
                        this.setState({ singlePickerSelectedItem: result.selectedItem });
                    }}
                >
                    <FlatList style={{height:responsiveHeight(40)}}
                              data={this.state.networks}
                              renderItem={({item})=>this.renderRow(item)} />
                </MaterialDialog>
            </View>
                )

    }

    onRowPress(rowID) {
        this.setState({network:rowID})
    }
    renderRow = (row) => (
        <TouchableOpacity key={row} onPress={() => this.onRowPress(row)}>
            <View style={styles.rowContainer}>
                <View style={styles.iconContainer}>
                    <Icon
                        name={this.state.network && row.name===this.state.network.name ? 'radio-button-checked' : 'radio-button-unchecked'}
                        color={this.state.network && row.name===this.state.network.name ?theme.accent:this.props.colorAccent}
                        size={24}
                    />
                </View>
                <Text style={material.subheading}>{row.name}</Text>
            </View>
        </TouchableOpacity>
    );
    renderUserAccount() {
        return (<ScrollView style={styles.container}>
            {this.prepareModal()}
            <View style={{flexDirection:'row'}}>
                <Icon.Button name={"keyboard-backspace"}
                color={"white"}
                size={24}
                backgroundColor={theme.primary}
                onPress={()=>this.props.navigation.pop()}
                />
                            <Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>

                </View>
            <View
                style={{width:responsiveWidth(90),
                    marginTop:20,
                    alignSelf:'center',
                    borderRadius:10,
                    paddingLeft:20,
                    paddingRight:20,
                    backgroundColor:'white'}}

            >
                <Dropdown
                    label={I18n.t('COUNTRY_CHOICE')}
                    data={this.state.countries}
                    useNativeDriver={true}
                    value={this.state.country===null?"":
                        this.state.country}
                    onChangeText={(value,index,data)=>{
                        this.setState({country:value,indicatif:value.code_dial,network:null})

                        this.getNetworks(value.code_dial)
                    }}
                    valueExtractor={(value)=>{return value}}
                    labelExtractor={(value)=>{return value.name}}
                />
            </View>
            <Animatable.View ref={(comp)=>{this.numanim=comp}}>
                <View style={{flexDirection:'row',flex:1}}>
                    <Fumi iconClass={FontAwesomeIcon} iconName={'flag'}
                          value={this.state.indicatif}
                          editable = {false}

                          onChangeText={(text)=>{

                              this.setState({indicatif:text})}}
                          style={{
                              width:responsiveWidth(30),
                              marginTop:responsiveHeight(2),
                              marginLeft:responsiveWidth(5),
                              marginRight:responsiveWidth(5),
                              borderRadius:5,
                          }}
                    />
                    <Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
                          label={I18n.t('PHONE_NUMBER')}
                          iconColor={'#f95a25'}
                          ref={(comp)=>{this.num_input=comp}}
                          iconSize={20}
                          onChangeText={(text)=>{
                              let phonenumber=text
                              this.setState({phone:phonenumber})}}
                          style={{

                              marginTop:responsiveHeight(2),
                              marginRight:responsiveWidth(5),

                              width:responsiveWidth(55),
                              borderRadius:5,
                          }}
                    >
                    </Fumi>
                </View>
            </Animatable.View>

            <Animatable.View  ref={(comp)=>{this.networkanim=comp}}>
                <View
                    style={{width:responsiveWidth(90),
                        marginTop:20,
                        alignSelf:'center',
                        borderRadius:10,
                        paddingLeft:20,
                        paddingRight:20,
                        backgroundColor:'white'}}

                >
                    <Dropdown
                        label={I18n.t('NETWORK_CHOICE')}
                        data={this.state.networks}
                        value={this.state.network==null?"":this.state.network}
                        onChangeText={(value,index,data)=>{
                            this.setState({network:value})}}
                        valueExtractor={(value)=>{return value}}
                        labelExtractor={(value)=>{return value.name}}
                    />
                </View>
            </Animatable.View>
        <Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
                    isLoading={this.state.isLoading}
                    onPress={()=>{this._onUserCreateAccount()}}>{I18n.t('CREATE_ACCOUNT')}</Button>

        </ScrollView>)

    }

    _onUserCreateAccount() {
        let { myPosition,textaddress,place,user,network,phone,indicatif }=this.state;
        this.setState({isLoading:true})
        if(user!==undefined) {
            if (this.checkOrShake(myPosition, this.mapanim)) {
                if (this.checkOrShake(phone, this.numanim)) {
                    if (this.checkOrShake(network, this.networkanim)) {
                        var data={};
                        data.tag="member"
                        data['type']="create_user"
                        data['phone']=indicatif+phone;
                        data['network']=network;
                        data['town']=this.state.town;
                        data['latitude']=myPosition.latitude;
                        data['longitude']=myPosition.longitude;
                        for(let i in user){
                            data[i]=user[i];
                        }
                        console.log(data);
                        createUserAccount(data).then((result)=>{
                            console.log(data)
                            if(result.success!==undefined && result.success===1){
                                Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"),
                                    I18n.t('ACCOUNT_CREATED_SUCCESS')
                                    ,[    {text: 'OK', onPress: () => { this.props.navigation.popToTop()
                                this.setState({isLoading:false})}}],{ cancelable: false })
                            }else{
                                if(result.error!==undefined){
                                    switch(result.error){
                                        case -3:
                                            Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"),I18n.t('FAILED_TEXT_CONTACT_ADMIN')
                                                ,[    {text: 'OK', onPress: () =>""}],{ cancelable: false })
                                            break;
                                        default:
                                            Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"),result.error_msg
                                                ,[    {text: 'OK', onPress: () =>""}],{ cancelable: false })
                                    }
                                    this.setState({isLoading:false})
                                }
                            }
                        }).catch((error)=>{
                            this.setState({isLoading:false})
                        })

                    }else         this.setState({isLoading:false})
                }else         this.setState({isLoading:false})
            }else         this.setState({isLoading:false})
        }else{
            this.setState({isLoading:false})

        }
    }

    checkUserGeolocated() {
        let { myPosition,textaddress,place,indicatif,user,network,phone,phoneTransaction }=this.state;
        this.setState({isLoading:true})
        if(user!==undefined) {
            if (this.checkOrShake(myPosition, this.mapanim)) {
                    if (this.checkOrShake(phone, this.numanim)) {
                        if (this.checkOrShake(network, this.networkanim)) {
                            var data={};
                            data.tag="member";
                            data.type="create_geolocated_user";
                            data['phone']=indicatif+phone;
                            data['phone_transaction']=indicatif+phoneTransaction;
                            data['network']=network;
                            data['town']=this.state.town;
                            data['latitude']=myPosition.latitude;
                            data['longitude']=myPosition.longitude;
                            for(let i in user){
                                data[i]=user[i];
                            }
                            data['category']=user.category;

                            data['active']='0';
                            createGeolocatedAccount(data).then((result)=>{
                                console.log(result);
                                 if(result.success!==undefined && result.success===1){
                                     const message=result.category==='super'?I18n.t("HYPERVISOR_MUST_VALIDATE_SUPERVISOR")
                                         :I18n.t("ACCOUNT_SUCCESSFULL_CREATED")
                                     Alert.alert("",message,[{
                                        text:"Ok",
                                         onPress:()=>{  this.props.navigation.popToTop()
                                         }
                                     }])
                                     setTimeout(()=>{
                                         this.setState({isLoading:false})

                                     },1000)
                                     this.props.navigator.push({
                                       screen:route.login
                                     })
                                     this.setState({isLoading:false})
                                 }else{

                                    /* Crashlytics.log(JSON.stringify({"type":"erreur lors de la creation","data":result}))
                                     Answers.logCustom("error",JSON.stringify(result))*/
                                     console.warn(result)
                                    if(result.error!==undefined){
                                        switch(result.error){
                                            case -3:
                                                Alert.alert("",I18n.t('UNABLE_TO_CREATE_ACCOUNT'),[{
                                                    text:"Ok",
                                                    onPress:()=>{                 }
                                                }])
                                            break;
                                            default:
                                                if(result.error_msg)
                                                Alert.alert("",result.error_msg,[{
                                                    text:"Ok",
                                                    onPress:()=>{                 }
                                                }])
                                                else if(result.sql_error)
                                                    Alert.alert(I18n.t('UNABLE_TO_CREATE_ACCOUNT'),result.sql_error,[{
                                                        text:"Ok",
                                                        onPress:()=>{                 }
                                                    }])
                                        }
                                        this.setState({isLoading:false})
                                    }
                                 }
                            }).catch((error)=>{
                                this.setState({isLoading:false})
                            })

                    }else         this.setState({isLoading:false})
                    }else         this.setState({isLoading:false})
            }else         this.setState({isLoading:false})
        }else{
            this.setState({isLoading:false})

        }
    }

    checkOrShake(champ,view) {
        let res=false;
        if(champ!==undefined && champ.length>0) {
            res=true;
        }else if(champ!==Array && champ!==undefined){
            res=true
        }
        else{
            view.shake(800)
        }
        return res;
}
    prepareModal() {
        return (<MaterialDialog
            visible={this.state.modalVisible}
            title={I18n.t("LOADING_INFO")}
        >
            <View style={{justifyContent: 'center',alignItems:'center'}}>
                <Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
                <ProgressBarAndroid/>
            </View>
        </MaterialDialog>)
    }
}
const   SHORT_LIST = ['List element 1', 'List element 2', 'List element 3'];

const LONG_LIST = [
    'List element 1',
    'List element 2',

    'List element 5',
    'List element 6',
    'List element 7',
    'List element 8',
  ,
];

const styles=StyleSheet.create({
    rowContainer: {
        height: 52,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    iconContainer: {
        marginRight: 16,
    },
    container:{
        flex:1,
        backgroundColor:theme.primary,
    },
    textbtnvalide:{
        color:'white',
        fontWeight:'bold'
    },
    bigtitle:{
        color:'white',
        fontSize:20,
        flex:1,
        fontWeight:'bold',
        textAlign:'center',
        margin:20,
    },
    subbigtitle:{
        color:'white',
        fontSize:17,
        textAlign:'center',
        margin:5,
    },
    map: {
        height: 200,
        marginRight:responsiveWidth(5),
        marginLeft:responsiveWidth(5),
        marginVertical: 10,
    },
    btnvalide:{
        marginTop:20,
        marginLeft:20,
        marginRight:20,
        borderColor:'transparent',
        backgroundColor:theme.accentLight,
        height:52
    },
    input:{
        height:60,
        marginTop:responsiveHeight(2),
        marginLeft:responsiveWidth(5),
        marginRight:responsiveWidth(5),
        borderRadius:5,
    }
})