import Button from 'apsl-react-native-button';
import axios from "axios";
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
    Alert,
    BackHandler,
    FlatList,
    Image,
    PermissionsAndroid,
    Platform,
    ProgressBarAndroid,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Dialog from "react-native-dialog";
import Geolocation from 'react-native-geolocation-service';
import I18n from 'react-native-i18n';
import MapView, { Marker } from 'react-native-maps';
import { MaterialDialog } from "react-native-material-dialog";
import { Dropdown } from 'react-native-material-dropdown-v2';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { ProgressDialog } from "react-native-simple-dialogs";
import { Fumi } from 'react-native-textinput-effects';
import { material } from 'react-native-typography';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { store } from "../../redux/store";
import { getDefaultTown } from "../../webservice/AuthApi";
import { uploadImage } from "../../webservice/IlinkConstants";
import {
    createGeolocatedAccount,
    createUserAccount,
    getCodeInformation,
    getCountryNetwork,
    getListCountriesActive,
    getTownInformationName
} from './../../webservice/AuthApi';
import { getPositionInformation } from './../../webservice/MapService';

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;

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.isOffline = navigation.getParam('isOffline', false);
        this.result = navigation.getParam('result', null);
        this.state = {
            password: null,
            enterPhone: null,
            nameanim: null,
            networksinglePickerVisible: false,
            surnameanim: null,
            passwordanim: null,
            confirmpassanim: null,
            network: null,
            isLoging: false,
            countries: '',
            selectedCountry: null,
            indicatif: '+237',
            country: "Cameroon",
            snackVisible: false,
            snackText: '',
            disableNetwork: false,
            networks: [],
            modalVisible: true,
            select_network: I18n.t("SELECT_NETWORK"),
            user: this.user,
            result: {
                companies_types: [],
                taxes: [],
                taxes_selected: null,
                companies_types_selected: null
            },
            id_network_tax: null,
            tax_units_count: null,
            id_company_type: null,
            identification_number: null,
            trade_registry: null,
            responsable_name: null,
            image: "logo.png",
            displayImage: false,
            loadingUpload: false,
            latitude: "",
            longitude: "",
            // town: this.data !== null && this.data.town ? this.data.town : {
            //     name: "",
            //     id: "2",
            //     indicatif: "",
            //     districts: []
            // },

        };
        this.dataToSendTemp = new FormData();
        console.log("is offline", this.isOffline);
        console.log("countries", this.countries);
        console.log("props", this.props);
    }

    // Fonction de validation pour les numéros de téléphone camerounais
    validateCameroonPhoneNumber = (phoneNumber) => {
        if (!phoneNumber) {
            return false; // Si le numéro est vide, retourne false
        }
        console.log("Phone number===>>", phoneNumber);
        const trimmedPhoneNumber = phoneNumber.trim();
        const phoneRegex = /^\d{9}$/;
        return phoneRegex.test(trimmedPhoneNumber);
    }

    createFormData = (photo) => {
        this.dataToSendTemp.append("image", {
            name: photo.path.split('/').pop(),
            type: photo.mime,
            uri:
                Platform.OS === "android" ? photo.path : photo.path.replace("file://", "")
        });

    };

    retreiveCodeInformation() {
        const membre = this.state.user.member;
        return new Promise(async (resolve, reject) => {
            try {
                let datas = await getCodeInformation(membre);
                console.log("ICI datas===>>",datas)
                // Assuming the API returns country and dial_code
                const { country, dial_code, ...otherData } = datas;
                resolve({ country, dial_code, ...otherData });
              } catch (error) {
                reject(error);
              }
          
        });

    }
  
    render() {
        console.log("State", this.state);
        return this.type === 1 ? this.renderUserGeoAccount() : this.renderUserAccount()

    }

    async getNetworks(indicatif) {
        if (!indicatif) {
          this.setState({ modalDialog: false });
          Alert.alert(
            "Une erreur est survenue",
            "Impossible de récupérer des informations du pays. Vérifiez que votre GPS est activé et que vous êtes connecté à internet, puis réessayez.",
            [
              {
                text: "Recommencer",
                onPress: () => {
                  this.setState({ modalDialog: true });
                  this.watchLocation();
                }
              },
              {
                text: "Annuler",
                onPress: () => this.props.navigation.popToTop()
              }
            ]
          );
          return;
        }
      
        try {
          const result = await this.retreiveCodeInformation();
          console.log("RESULTAT===>> ", result);
          
          if (!result) {
            throw new Error("Aucun résultat obtenu");
          }
      
          const { category, country, dial_code, child, network } = result;
          
          this.setState({
            result,
            // country,
            // indicatif: dial_code
          });
      
          if (child) {
            this.setState({ disableNetwork: true });
            
            if (network) {
              this.setState({
                modalVisible: false,
                networks: [network],
                ...(child === "geolocated" || child === "super" ? {
                  network,
                  select_network: I18n.t("YOUR_NETWORK_SELECTED")
                } : {})
              });
            } else {
                throw new Error("Impossible de récupérer les informations du code hiérarchique ou taxe");
            }
          } else {
            const networks = await getCountryNetwork("+237");
            const reseaux = Object.values(networks).filter(network => network !== "");
            this.setState({
              networks: reseaux,
              modalVisible: false
            });
          }
        } catch (error) {
          console.error("Erreur dans getNetworks:", error);
          this.setState({ modalVisible: false });
          
          if (error.message === "Impossible de récupérer les informations du code hiérarchique ou taxe") {
            Alert.alert(I18n.t('TITLE_PROBLE_COME'), error.message, [{
              text: "Revenir",
              onPress: () => this.props.navigation.pop()
            }]);
          } else {
            this.showErrorDialog();
          }
        }
      }

    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.fetchCountries();
        //this.fetchCountryInfo();
        this.mounted = true;
        const {type} = this.props;


        if (this.props.coordinate) return;

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

    }

    fetchCountries = async () => {
        try {
          const response = await getListCountriesActive();
          console.log('Réponse de getListCountriesActive:', response);
    
          let countriesData = [];
          if (response.error === "error" && response.error_msg) {
            const jsonMatch = response.error_msg.match(/\[.*\]/);
            if (jsonMatch) {
              countriesData = JSON.parse(jsonMatch[0]);
            }
          }else{
            countriesData = response;
          }
    
          const formattedCountries = countriesData.map(country => ({
            label: country.name,
            value: country.name,
            code_dial: country.code_dial,
            code_country: country.code_country
          }));
    
          this.setState({ 
            // country: formattedCountries,
            countries: formattedCountries[0], 
            isLoading: false,
            selectedCountry: formattedCountries[0], // Sélectionne le premier pays par défaut
            // indicatif: formattedCountries[0].code_dial
          });
          this.getNetworks(formattedCountries[0].label);
        } catch (error) {
          console.error('Erreur lors de la récupération des pays:', error);
          this.setState({ isLoading: false });
        }
      };
    
      onSelectCountry = (country) => {
        this.setState({
          selectedCountry: country,
        //   indicatif: country.code_dial,
          modalVisible: false
        });
        this.getNetworks(country.code_dial);
      };
    // fetchCountryInfo = async () => {
       
    //     try {
    //       const response = await getListCountriesActive();
    //       console.log('Réponse de getListCountriesActive:', response);
    
    //       let countryData = null;
    
    //       if (response.error === "error" && response.error_msg) {
    //         const jsonMatch = response.error_msg.match(/\[.*\]/);
    //         if (jsonMatch) {
    //           const parsedData = JSON.parse(jsonMatch[0]);
    //           if (Array.isArray(parsedData) && parsedData.length > 0) {
    //             countryData = parsedData[0]; // Prendre le premier pays de la liste
    //           }
    //         }
    //       }
    
    //       if (countryData) {
    //         this.setState({
    //           country: countryData.name,
    //           indicatif: countryData.code_dial,
    //           isLoading: false
    //         });
    //       } else {
    //         throw new Error('Aucune donnée de pays valide trouvée');
    //       }
    //     } catch (error) {
    //       console.error('Erreur lors de la récupération des infos du pays:', error);
    //       this.setState({ error: error.message, isLoading: false });
    //       Alert.alert(
    //         "Erreur",
    //         "Impossible de récupérer les informations du pays. Veuillez réessayer.",
    //         [{ text: "OK" }]
    //       );
    //     }
    //   };
    
    
      handleCountryChange = (value, index, data) => {
        const selectedCountry = this.state.countries[index];
        this.setState({
          selectedCountry: selectedCountry,
        //   indicatif: selectedCountry.code_dial,
          network: null
        });
        this.getNetworks(selectedCountry.code_dial);
        console.log("data :", selectedCountry.code_dial)
       
      };

    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() {
        if (this.isOffline) {
            Geolocation.getCurrentPosition((position) => {
                this.setState({
                    modalVisible: false,
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                }, () => {
                    console.log("latitude", this.state.latitude);
                });
                if (this.result.child) {
                    this.setState({disableNetwork: true});
                    if (this.result.network) {
                        this.setState({
                            modalVisible: false, networks: [this.result.network],
                        });
                        if (this.result.child === "geolocated" || this.result.child === "super") {
                            this.setState({
                                network: this.result.network,
                                select_network: I18n.t("YOUR_NETWORK_SELECTED")
                            });
                        }
                    } else {
                        this.showErrorDialog();
                    }
                }

            }, (e) => {
                Alert.alert(I18n.t('TITLE_PROBLE_COME'), "Impossible de recuperer les informations du code parrain", [{
                    text: "Reesayer",
                    onPress: () => this.watchLocation()
                }])
                console.warn("POSITION ERROR", e);
                this.setState({modalVisible: false})
            }, this.props.geolocationOptions);
        } else {
            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: {
                                                name: "Douala",
                                                id: "2",
                                                indicatif: "+237"
                                            }});
                                    })
                                } else {
                                    getDefaultTown().then(result => {
                                        getTownInformationName(result.default_locality).then((resultTowwn) => {
                                            let town = null;
                                            if (resultTowwn instanceof Array) {
                                                town = resultTowwn[0];
                                            } else
                                                town = resultTowwn;
                                                this.setState({town: {
                                                    name: "Douala",
                                                    id: "2",
                                                    indicatif: "+237"
                                                }});
                                        });
                                    })
                                }
                            }
                        }
                        getListCountriesActive().then((cnt) => {
                            this.setState({countries: cnt})
                            console.debug("cnt, shortcountry : ", cnt, shortcountry, countries);
                            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);
    }

    renderLoader = () => {
        return (
            <ProgressDialog
                visible={this.state.loadingUpload}
                title={I18n.t('LOADING')}
                message={I18n.t('LOADING_INFO')}
            />
        )
    }

    uploadImage = () => {
        const auth = store.getState().authKeyReducer;
        const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';

        axios({
            url: `${uploadImage}`,
            method: 'POST',
            data: this.dataToSendTemp,
            headers: {
                'Authorization': authKey,
                'X-Localization': I18n.currentLocale(),
                'Content-Type': 'multipart/form-data'
            },
        })
            .then(response => {
                console.log(response);
                this.setState({image: response.response.filename, loadingUpload: false});
            })
            .catch(error => {
                console.log(error);
                if (error.response)
                    console.log(error.response);
                else if (error.request)
                    console.log(error.request);
                else
                    console.log(error.message);

                Alert.alert("", I18n.t('TITLE_ERROR_SURVENU'), [{
                    text: "Ok",
                    onPress: () => {
                    }
                }]);
                this.setState({loadingUpload: false});
            });
    };
    

    renderDialogImage = () => {

        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={this.state.displayImage}>

                <Dialog.Title>{I18n.t('PREVISUALISATION')}</Dialog.Title>

                <View>
                    <View style={{width: 50}}/>
                    <View style={{justifyContent: 'center', alignContent: 'center', alignItems: 'center'}}>
                        <Image source={{uri: this.state.image.path}} style={{
                            width: this.state.image.width, height: this.state.image.height, aspectRatio: 1,
                            resizeMode: 'contain'
                        }}/>
                    </View>
                    <View style={{width: 50}}/>
                </View>

                <Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
                    this.setState({
                        displayImage: false,
                        loadingUpload: true
                    });
                    this.uploadImage();

                }}/>
            </Dialog.Container>
        )
    }

    renderUserGeoAccount() {
        const { selectedCountry } = this.state;
        console.log("selectedCountry", selectedCountry);
        return (
            <View style={styles.container}>
                
                {this.prepareModal()}
                {this.state.displayImage && this.renderDialogImage()}
                {this.state.loadingUpload && this.renderLoader()}
                <View style={{flexDirection: 'row'}}>
                    <Icon.Button name={"keyboard-backspace"}
                                 color={"white"}
                                 size={24}
                                 backgroundColor={theme.primary}
                                 onPress={() => this.props.navigation.pop()}
                    />
                    {
                        !isNil(this.state.result) ?
                            this.state.result.child === "geolocated" &&
                            <Text style={styles.bigtitle}>{I18n.t('SECOND_STEP')}</Text>
                            : <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'
                        }}>
                             {/* <Fumi
            iconClass={FontAwesomeIcon}
            label={I18n.t('COUNTRY_CHOICE')}
            // value={this.state.countries}
            value={selectedCountry ? `${selectedCountry.label}` : ''}
            enabled={false}
            editable={false}
            onChangeText={(value, index, data) => {
                const selectedCountry = this.state.countries[index];
                this.setState({
                    countries: selectedCountry.countries,
                  indicatif: selectedCountry.code_dial,
                  network: null
                });
                this.getNetworks(selectedCountry.label);
              }}
            
          />


{/* <Dropdown
        label={I18n.t('COUNTRY_CHOICE')}
        data={this.state.countries}
        useNativeDriver={true}
        disabled={this.state.disableNetwork}
        value={this.state.selectedCountry ? this.state.selectedCountry.label : ''}
        onChangeText={(value, index, data) => {
          const selectedCountry = this.state.countries[index];
          this.setState({
            selectedCountry: selectedCountry,
            indicatif: selectedCountry.code_dial,
            network: null
          });
          this.getNetworks(selectedCountry.code_dial);
        }}
        valueExtractor={(item) => item.label}
        labelExtractor={(item) => item.label}
      /> 
                        {/* <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) => {
                                          this.setState({phone: text.trim(), contact: text.trim()})
                                      }}
                                      style={{

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

                                          width: responsiveWidth(90),
                                          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) => {
                                          this.setState({phoneTransaction: text.trim(), contactTransaction: text.trim()})
                                      }}
                                      style={{

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

                                          marginLeft: responsiveWidth(5),
                                          width: responsiveWidth(90),
                                          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>

                    {
                        this.isOffline ?
                            <Animatable.View>
                                <View style={{flexDirection: 'row', flex: 1}}>
                                    <Fumi iconClass={FontAwesomeIcon} iconName={'map-marker'}
                                          value={"" + this.state.latitude}
                                          enabled={false}
                                          placeholder={I18n.t('LATITUDE')}
                                          editable={false}
                                          style={{
                                              width: responsiveWidth(45),
                                              height: responsiveHeight(10),
                                              alignSelf: 'center',
                                              marginLeft: responsiveWidth(5),
                                              marginRight: responsiveWidth(5),
                                              borderRadius: 5,
                                          }}
                                    />
                                    <View>
                                        <Fumi iconClass={FontAwesomeIcon} iconName={'map-marker'}
                                              placeholder={I18n.t('LONGITITUDE')}
                                              iconColor={'#f95a25'}
                                              editable={false}
                                              enabled={false}
                                              iconSize={20}
                                              value={"" + this.state.longitude}
                                              style={{
                                                  width: responsiveWidth(40),
                                                  height: responsiveHeight(10),
                                                  alignSelf: 'center',
                                                  marginRight: responsiveWidth(5),
                                                  borderRadius: 5,
                                              }}
                                        >
                                        </Fumi>
                                    </View>
                                </View>
                            </Animatable.View> :
                            <>
                                <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('../../assets/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()
                            }}>{
                        this.isOffline ?
                            (!isNil(this.result)) &&
                            (this.result.child === "geolocated") ? I18n.t('NEXT') : I18n.t('CREATE_ACCOUNT')
                            :
                            (!isNil(this.state.result)) ?
                                (this.state.result.child === "geolocated") ? I18n.t('NEXT') : I18n.t('CREATE_ACCOUNT')
                                : 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={[{"code_country": "CM", "code_dial": "+237", "label": "Cameroon", "value": "Cameroon"}]}
                    useNativeDriver={true}
                    // value={this.state.country === null ? "" :
                    //     this.state.country}
                    value={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});
                            this.setState({id_network_tax: value.id});

                        }}
                        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['town'] =  {
                            name: "Douala",
                            id: "2",
                            indicatif: "+237"
                        }
                        data['latitude'] = myPosition.latitude;
                        data['longitude'] = myPosition.longitude;
                        for (let i in user) {
                            data[i] = user[i];
                        }
                        console.log("data :", data);
                        createUserAccount(data).then((result) => {
                            console.log("result : ", result)
                            console.log("Données envoyées au serveur data :", JSON.stringify(data, null, 2));
                            console.log("Réponse complète du serveur result :", JSON.stringify(result, null, 2));
                            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("ERROR_LABLE"), 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: () =>this.props.navigation.popToTop()}], {cancelable: false})
                                    }
                                    this.setState({isLoading: false})
                                }
                            }
                        }).catch((error) => {
                            console.error("Erreur lors de la création du compte :", error);
                            Alert.alert("Erreur", "Une erreur s'est produite lors de la création du compte. Veuillez réessayer.");
                            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});
        // Validation des numéros de téléphone
        const isPhoneValid = this.validateCameroonPhoneNumber(phone);
        const isPhoneTransactionValid = this.validateCameroonPhoneNumber(phoneTransaction);
        
        if (!isPhoneValid || !isPhoneTransactionValid) {
            Alert.alert("Erreur", "Les numéros de téléphone doivent être des numéros camerounais valides de 9 chiffres (ex: 656391882).");
            this.setState({isLoading: false});
            return;
        }
        if (user !== undefined) {
            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'] = this.isOffline ? this.state.latitude : myPosition.latitude;
                    data['longitude'] = this.isOffline ? this.state.longitude : myPosition.longitude;
                    for (let i in user) {
                        data[i] = user[i];
                    }
                    data['category'] = user.category;

                    data['active'] = '0';
                    if (this.isOffline) {
                        if (!isNil(this.result)) {
                            if (this.result.child === "geolocated") {
                                this.setState({isLoading: false})
                                this.props.navigation.push(route.createUserStep, {
                                    type: this.type,
                                    user: this.state.user,
                                    data: data,
                                    result: this.result,
                                    isActif: false,
                                    isOffline: this.isOffline
                                });
                            }
                        }
                    } else {
                        if (!isNil(this.state.result)) {
                            if (this.state.result.child === "geolocated") {
                                this.setState({isLoading: false})
                                this.props.navigation.push(route.createUserStep, {
                                    type: this.type,
                                    user: this.state.user,
                                    data: data,
                                    result: this.state.result,
                                    isActif: false,
                                    isOffline: this.isOffline
                                });
                            } else {
                                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})

        }
    }

    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,
        },
        contentPicker: {
            padding: 10,
            borderRadius: 8,
            flex: 1,
            alignItems: "center"
        },
        contain: {flexDirection: "row"},
        thumb: {
            borderRadius: 30,
            marginRight: 10
        },
        point: {
            width: 25,
            height: 25,
            borderRadius: 11,
            alignItems: "center",
            justifyContent: "center",
            position: "absolute",
            right: 9,
            bottom: 0
        },
    })