import React, { Component } from 'react';
import { Alert, StyleSheet, Text, View, Image, ScrollView, Platform, ProgressBarAndroid, PermissionsAndroid, Keyboard } from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/MaterialIcons';
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';
let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');
import I18n from 'react-native-i18n';
import isEqual from 'lodash/isEqual';
import { Color } from '../../config/Color';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Dropdown } from 'react-native-material-dropdown';
import { getPositionInformation } from './../../webservice/MapService';
import { getCountryNetwork, createGeolocatedAccount, createUserAccount, getTownInformationName, getListCountriesActive, getCodeInformation, readUser } from './../../webservice/AuthApi';
import { SinglePickerMaterialDialog, MultiPickerMaterialDialog, MaterialDialog } from "react-native-material-dialog";
import Geolocation from 'react-native-geolocation-service';
import { identityPieces } from '../../utils/UtilsFunction';
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
const moment = require('moment');
import LottieView from 'lottie-react-native';


export default class ValidateIdentification extends Component {
     static navigatorStyle = {
          navBarBackgroundColor: Color.primaryColor,
          statusBarColor: Color.primaryDarkColor,
          navBarTextColor: '#FFFFFF',
          navBarButtonColor: '#FFFFFF'

     };

     static navigationOptions = () => {
          return {
               drawerLabel: () => null,
               headerTitle: I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION'),
               headerTintColor: 'white',
               headerStyle: {
                    backgroundColor: Color.primaryColor,
                    marginTop: 0,
                    color: 'white'
               },
               headerTitleStyle: {
                    color: "white"
               },
               title: I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')
          }
     };

     constructor(props) {
          super(props);
          this.state = {
               memberCode: null
          };
     }

     componentDidMount() {
          readUser().then((user) => {
               if (user) {
                    if (user !== undefined) {
                         this.setState({ user });
                    }
               }
          });
     }

     componentWillUnmount() {
     }

     showErrorDialog() {
          this.setState({ modalDialog: false })
          Aler.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() } }])
     }

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

     render() {
          console.log("STATE", this.state);
          const { showPickerDateNaissance } = this.state;
          return (
               <>
                    <ScrollView style={styles.container}>

                         <Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>

                         <Animatable.View style={{
                              justifyContent: 'center',
                              alignItems: 'center'
                         }} ref={(comp) => { this.nameanim = comp }}>
                              <LottieView
                                   style={styles.lottie}
                                   source={require('../../datas/json/identity_scan.json')}
                                   autoPlay
                                   loop={true}
                              />
                         </Animatable.View>

                         <Animatable.View ref={(comp) => { this.nameanim = comp }}>
                              <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                                   label={`${I18n.t('MEMBER_CODE')}`}
                                   iconColor={'#f95a25'}
                                   iconSize={20}
                                   onChangeText={(memberCode) => {
                                        this.setState({ memberCode })
                                   }}
                                   style={styles.input}
                              >
                              </Fumi>
                         </Animatable.View>

                         <Button style={styles.btnvalide}
                              textStyle={styles.textbtnvalide}
                              isLoading={this.state.isLoging}
                              onPress={() => { }}>
                              {I18n.t('SUBMIT_LABEL')}</Button>

                    </ScrollView>
               </>
          )
     }
}

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.primaryDarkColor,
     },
     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,
     },
     btnvalide: {
          marginTop: 20,
          marginLeft: 20,
          marginRight: 20,
          borderColor: 'transparent',
          backgroundColor: Color.accentLightColor,
          height: 52
     },
     input: {
          height: 60,
          marginTop: responsiveHeight(2),
          marginLeft: responsiveWidth(5),
          marginRight: responsiveWidth(5),
          borderRadius: 5,
     },
     lottie: {
          width: 540,
          height: 300
     },
});