ilink-world/screens/identification/validateIdentification.js

import Button from 'apsl-react-native-button';
import React, { Component } from 'react';
import { Alert, PermissionsAndroid, ScrollView, StyleSheet, Image, Text, View } from 'react-native';
import * as Animatable from 'react-native-animatable';
import { TouchableOpacity } from 'react-native-gesture-handler';
import I18n from 'react-native-i18n';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { Fumi } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import PopoverTooltip from 'react-native-popover-tooltip';
import ImagePicker from 'react-native-image-crop-picker';
import Dialog from "react-native-dialog";
import { Color } from '../../config/Color';
import { readUser } from './../../webservice/AuthApi';
let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
const moment = require('moment');


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,
               image: null,
               displayImage: false,
               userPhoto: null,
               cardFront: null,
               cardBack: 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()
                         }
                    }])
          }
     }

     onPicture = ({ uri }) => {
          this.setState({ image: uri, displayCamera: true });
          console.log("URI", uri);
     }

     onBackToCamera = () => {
          this.setState({ image: null, displayCamera: false });
     }

     renderDialogImage = () => {

          return (
               <Dialog.Container useNativeDriver={true} visible={this.state.displayImage}>

                    <Dialog.Title>Image</Dialog.Title>

                    <View>
                         <Image source={{ uri: this.state.image.path }} style={{ width: this.state.image.width, height: this.state.image.height }} />
                    </View>

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

     render() {
          console.log("STATE", this.state);
          const { showPickerDateNaissance } = this.state;
          return (
               <>
                    <ScrollView style={styles.container}>
                         {this.state.displayImage && this.renderDialogImage()}
                         <Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>

                         {/*                          <Animatable.View style={{
                              justifyContent: 'center',
                              alignItems: 'center'
                         }} ref={(comp) => { this.nameanim = comp }}>
                              <TouchableOpacity onPress={() => {
                                   this.onBackToCamera();
                                   this.setState({ displayCamera: true })
                              }}>

                                   {
                                        this.state.displayCamera ?
                                             <View style={styles.lottie}>
                                                  {
                                                       this.state.image ?
                                                            <Image source={{ uri: this.state.image }} style={{ flex: 1 }} />
                                                            : <Camera onPicture={this.onPicture} />
                                                  }
                                             </View>
                                             :
                                             <LottieView
                                                  style={styles.lottie}
                                                  source={require('../../datas/json/identity_scan.json')}
                                                  autoPlay
                                                  loop={true}
                                             />
                                   }
                              </TouchableOpacity>
                         </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>


                         <View style={{ marginTop: 20, flexDirection: 'row' }}>

                              <View style={[styles.contentPicker]}>

                                   <PopoverTooltip
                                        ref='toolTipVisibleUserPhoto'
                                        buttonComponent={
                                             <TouchableOpacity
                                                  style={[styles.contain]}
                                                  onPress={() => { this.refs['toolTipVisibleUserPhoto'].toggle(); }}
                                                  activeOpacity={0.9}>
                                                  <View style={[styles.contcontainerCenterentLeft]}>
                                                       <View>
                                                            <Icon name='account-circle' color={Color.whiteColor} style={[styles.thumb]} size={80} />
                                                            <View style={[styles.point, { backgroundColor: Color.accentColor }]}>
                                                                 <Icon name='camera-image' color={Color.whiteColor} size={20} />
                                                            </View>
                                                       </View>
                                                  </View>
                                             </TouchableOpacity>
                                        }
                                        items={[
                                             {
                                                  label: 'Camera',
                                                  onPress: () => {
                                                       ImagePicker.openCamera({
                                                            width: 200,
                                                            height: 200,
                                                            cropping: true,
                                                       }).then(image => {
                                                            this.setState({ image, displayImage: true });
                                                       })
                                                  }
                                             },
                                             {
                                                  label: 'Galerie',
                                                  onPress: () => {
                                                       ImagePicker.openPicker({
                                                            width: 300,
                                                            height: 400,
                                                            cropping: true
                                                       }).then(image => {
                                                            this.setState({ image, displayImage: true });
                                                       });
                                                  }
                                             }
                                        ]}
                                        animationType='spring'
                                        overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
                                        tooltipContainerStyle={{ borderRadius: 0 }}
                                        labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
                                        labelSeparatorColor={Color.dividerColor}
                                   />
                              </View>

                              <View style={[styles.contentPicker]}>
                                   <PopoverTooltip
                                        ref='toolTipVisibleCardFront'
                                        buttonComponent={
                                             <TouchableOpacity
                                                  style={[styles.contain]}
                                                  onPress={() => { this.refs['toolTipVisibleCardFront'].toggle(); }}
                                                  activeOpacity={0.9}>
                                                  <View style={[styles.contcontainerCenterentLeft]}>
                                                       <View>
                                                            <Icon name='credit-card-scan' color={Color.whiteColor} style={[styles.thumb]} size={80} />
                                                            <View style={[styles.point, { backgroundColor: Color.accentColor }]}>
                                                                 <Icon name='camera-image' color={Color.whiteColor} size={20} />
                                                            </View>
                                                       </View>
                                                  </View>
                                             </TouchableOpacity>
                                        }
                                        items={[
                                             {
                                                  label: 'Camera',
                                                  onPress: () => {
                                                       ImagePicker.openCamera({
                                                            width: 400,
                                                            height: 200,
                                                            cropping: true,
                                                       }).then(image => {
                                                            this.setState({ image, displayImage: true });
                                                       })
                                                  }
                                             },
                                             {
                                                  label: 'Galerie',
                                                  onPress: () => {
                                                       ImagePicker.openPicker({
                                                            width: 400,
                                                            height: 200,
                                                            cropping: true
                                                       }).then(image => {
                                                            this.setState({ image, displayImage: true });
                                                       });
                                                  }
                                             }
                                        ]}
                                        animationType='spring'
                                        overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
                                        tooltipContainerStyle={{ borderRadius: 0 }}
                                        labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
                                        labelSeparatorColor={Color.dividerColor}
                                   />
                              </View>

                              <View style={[styles.contentPicker]}>
                                   <PopoverTooltip
                                        ref='toolTipVisibleCardBack'
                                        buttonComponent={
                                             <TouchableOpacity
                                                  style={[styles.contain]}
                                                  onPress={() => { this.refs['toolTipVisibleCardBack'].toggle(); }}
                                                  activeOpacity={0.9}>
                                                  <View style={[styles.contcontainerCenterentLeft]}>
                                                       <View>
                                                            <Icon name='credit-card-off' color={Color.whiteColor} style={[styles.thumb]} size={80} />
                                                            <View style={[styles.point, { backgroundColor: Color.accentColor }]}>
                                                                 <Icon name='camera-image' color={Color.whiteColor} size={20} />
                                                            </View>
                                                       </View>
                                                  </View>
                                             </TouchableOpacity>
                                        }
                                        items={[
                                             {
                                                  label: 'Camera',
                                                  onPress: () => {
                                                       ImagePicker.openCamera({
                                                            width: 400,
                                                            height: 200,
                                                            cropping: true,
                                                       }).then(image => {
                                                            this.setState({ image, displayImage: true });
                                                       })
                                                  }
                                             },
                                             {
                                                  label: 'Galerie',
                                                  onPress: () => {
                                                       ImagePicker.openPicker({
                                                            width: 400,
                                                            height: 200,
                                                            cropping: true
                                                       }).then(image => {
                                                            this.setState({ image, displayImage: true });
                                                       });
                                                  }
                                             }
                                        ]}
                                        animationType='spring'
                                        overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
                                        tooltipContainerStyle={{ borderRadius: 0 }}
                                        labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
                                        labelSeparatorColor={Color.dividerColor}
                                   />
                              </View>

                         </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,
     },
     contain: { flexDirection: "row" },
     containerCenter: {
          flex: 8,
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center"
     },
     thumb: {
          borderRadius: 30,
          marginRight: 10
     },
     point: {
          width: 25,
          height: 25,
          borderRadius: 11,
          alignItems: "center",
          justifyContent: "center",
          position: "absolute",
          right: 9,
          bottom: 0
     },
     textbtnvalide: {
          color: 'white',
          fontWeight: 'bold'
     },
     bigtitle: {
          color: 'white',
          fontSize: 20,
          flex: 1,
          fontWeight: 'bold',
          textAlign: 'center',
          margin: 20,
     },
     contentPicker: {
          padding: 10,
          borderRadius: 8,
          flex: 1,
          alignItems: "center"
     },
     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
     },
});