import React, { Component } from 'react';
import { View, StyleSheet, Text, ScrollView, TextInput, TouchableOpacity, TouchableHighlight, Modal, ImageBackground, Image, Alert } from 'react-native';
import Constants from 'expo-constants'
import { LinearGradient } from 'expo-linear-gradient';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
import * as MediaLibrary from 'expo-media-library';
import * as TaskManager from 'expo-task-manager';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions'
import SwipeUpDown from 'react-native-swipe-up-down';
import { Ionicons, AntDesign, EvilIcons, MaterialCommunityIcons, MaterialIcons, Feather } from '@expo/vector-icons';
import { Stopwatch } from 'react-native-stopwatch-timer'
import ViewShot from "react-native-view-shot";
import haversine from 'haversine'
import pick from 'lodash/pick'

const customData = require('./components/map.json')

const LOCATION_TASK_NAME = 'background-location-task';

test = []

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      mapRegion: null,
      hasLocationPermissions: false,
      locationResult: null,
      position: {
        latitude: 51.5033640,
        longitude: -0.1276250
      },
      pets: {
        pet: ''
      },
      checks: {

      },
      once: false,
      stopped: false,
      ended: true,
      switched: true,
      checkin: false,
      info: false,
      checked: false,
      start: true,
      locked: false,
      clues: [],
      notes: '',
      timeIn: null,
      timeOut: null,
      routeCoordinates: [],
      distanceTravelled: 0,
      prevLatLng: {},
      modalVisible: false,
      countDown: false,
      remainingSeconds: 0,
      interval: null,
      rollGranted: false,
      cameraGranted: false,
      viewShot2: null,
      Screeny: false
    };
  }

  handleAwake = () => {
    activateKeepAwake();
  }

  handleSleep = () => {
    deactivateKeepAwake();
  }

  handleStart() {
    var ival = setInterval(() => {
      if ((this.state.remainingSeconds > -1) && this.state.countDown) {
        this.setState(prevState => {
          return { remainingSeconds: prevState.remainingSeconds + 1 };
        });
      }
    }, 1000);

    this.setState(prevState => {
      return {
        remainingSeconds: prevState.remainingSeconds,
        countDown: true,
        interval: ival,
      };
    });
  }

  handleStop() {
    clearInterval(this.state.interval);
    this.setState(prevState => {
      return {
        remainingSeconds: prevState.remainingSeconds,
        countDown: false,
        interval: null,
      };
    });
  }

  handleReset() {
    clearInterval(this.state.interval);
    this.setState(() => {
      return {
        remainingSeconds: 0,
        countDown: false,
      };
    });
  }

  onSomeInputChange(text, item) {
    const pet = {
      [item]: text
    };
    this.setState({ pets: [...this.state.pets, pet] });
  }

  formatRemainingSeconds(remainingSeconds) {
    let numMinutes = Math.floor(remainingSeconds / 60);
    let numSeconds = remainingSeconds % 60;
    let formattedTime = "";

    if (numMinutes.toString().length == 1) {
      formattedTime += '0';
      formattedTime += numMinutes.toString();
    } else {
      formattedTime += numMinutes.toString();
    }

    formattedTime += ":";

    if (numSeconds.toString().length == 1) {
      formattedTime += '0';
      formattedTime += numSeconds.toString();
    } else {
      formattedTime += numSeconds.toString();
    }

    return formattedTime;
  }

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  componentDidMount() {
    this._getLocationAsync();
    this.getCameraPermissions()
  }

  async getCameraPermissions() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    if (status === 'granted') {
      this.setState({ cameraGranted: true });
    } else {
      this.setState({ cameraGranted: false });
      console.log('Uh oh! The user has not granted us permission.');
    }
    this.getCameraRollPermissions();
  }

  async getCameraRollPermissions() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    if (status === 'granted') {
      this.setState({ rollGranted: true })
    } else {
      console.log('Uh oh! The user has not granted us permission.');
      this.setState({ rollGranted: false });
    }
  }

  async takePictureAndCreateAlbum() {
    this.refs.viewShot.capture().then(uri => {
      MediaLibrary.createAssetAsync(uri)
      .then(() => {
        this.returned()
      })
    })
  }

  async takePictureAndCreateAlbum2() {
    this.refs.viewShot2.capture().then(uri => {
      this.setState({ viewShot2: uri })
    }).catch((error) => {
      console.warn(error)
    })
  }

  async ham(uri) {
    const asset = await MediaLibrary.createAssetAsync(uri);
  }

  calcDistance(newLatLng) {
    const { prevLatLng } = this.state
    return (haversine(prevLatLng, newLatLng) || 0)
  }

  handleLocationChange(position) {

    const { routeCoordinates, distanceTravelled } = this.state
    const newLatLngs = { latitude: position.coords.latitude, longitude: position.coords.longitude }
    const positionLatLngs = pick(position.coords, ['latitude', 'longitude'])

    if (this.state.start == false) {
      this.setState({
        position: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        },
        routeCoordinates: routeCoordinates.concat(positionLatLngs),
        distanceTravelled: distanceTravelled + this.calcDistance(newLatLngs),
        prevLatLng: newLatLngs
      })
    } else {
      this.setState({
        position: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        }
      })
    }
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      alert('Location not allowed')
      this.setState({
        locationResult: 'Permission to access location was denied',
      });
    } else {

      this.setState({ hasLocationPermissions: true });
    }


    let location = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced, timeout: 20000, maximumAge: 1000 })
    this.setState({ locationResult: JSON.stringify(location) })



    Location.startLocationUpdatesAsync(LOCATION_TASK_NAME,{
      accuracy: Location.Accuracy.Highest,
      timeInterval: 300,
      distanceInterval: 1
    });


    // Center the map on the location we just fetched.
    if (this.state.once == false) {
      this.setState({
        mapRegion: {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude,
          latitudeDelta: 0.0222,
          longitudeDelta: 0.0121,
        }, position: {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude
        },
        once: true
      });
      this.setState({
        mapRegion2: {
          latitude: 51.5033640,
          longitude: -0.1276250,
          latitudeDelta: 0.0222,
          longitudeDelta: 0.0121,
        }
      })
    }
  };

  items = () => {
    const { navigation } = this.props

    return this.state.clues.map((int, item) => {

      return (
        <View key={'id1' + item} style={{ flexDirection: 'row', borderBottomColor: '#ddd', borderBottomWidth: 1 }}>
          <View style={{ flex: 0.5, paddingLeft: 20, paddingVertical: 20, justifyContent: 'center' }}>
            <Text style={{ fontSize: 10, color: '#333' }}>Pet Name</Text>
            <TextInput
              onChangeText={(text) => {
                let pets = this.state.pets
                pets['pet' + item] = text
                this.setState({ pets });
              }}
              value={this.state.pets['pet' + item]}
              style={{ fontSize: 18, color: '#333' }} placeholder={'Enter Name'} numberOfLines={1} />
          </View>
          <View style={{ flex: 0.5, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
              <Text style={{ fontSize: 26 }}> 💩 </Text>
              <TouchableOpacity style={{ borderWidth: 3, borderColor: '#333', height: 25, width: 25, borderRadius: 3, alignItems: 'center', justifyContent: 'center' }}
                onPress={
                  () => {
                    this.setState({ ['checkin' + (item + 1)]: !this.state['checkin' + (item + 1)] })
                  }
                }>
                <Feather name={'check'} size={25} color={'#333'} style={{ display: this.state['checkin' + (item + 1)] == true ? 'flex' : 'none' }} />
              </TouchableOpacity>
            </View>
            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
              <Text style={{ fontSize: 26 }}> 💧 </Text>
              <TouchableOpacity style={{ borderWidth: 3, borderColor: '#333', height: 25, width: 25, borderRadius: 3, alignItems: 'center', justifyContent: 'center' }}
                onPress={
                  () => {
                    this.setState({ ['checked' + (item + 1)]: !this.state['checked' + (item + 1)] });
                  }
                }>
                <Feather name={'check'} size={25} color={'#333'} style={{ display: this.state['checked' + (item + 1)] == true ? 'flex' : 'none' }} />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      )
    })
  }

  formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0' + minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
  }

  returned = () => {
    this.handleSleep()
    this.setState({
      pets: {
        pet: ''
      },
      checks: {

      },
      once: false,
      stopped: false,
      ended: true,
      switched: true,
      checkin: false,
      checked: false,
      start: true,
      clues: [],
      notes: '',
      locked: false,
      timeIn: null,
      timeOut: null,
      routeCoordinates: [],
      distanceTravelled: 0,
      prevLatLng: {},
      modalVisible: false,
      countDown: false,
      remainingSeconds: 0,
      interval: null,
      Screeny: false
    })
  }

  finishUp = () => {
    this.handleReset()
    this.setModalVisible(false)
    this.setState({ timeOut: this.formatAMPM(new Date()) })
    //this.takePictureAndCreateAlbum()
    this.setState({
      Screeny: true
    })

  }

  ItemFull() {

    return (
      <ScrollView style={{ margin: 10, borderRadius: 15, flex: 1, elevation: 5, marginHorizontal: 10, backgroundColor: '#fff' }} contentContainerStyle={{ paddingBottom: 200 }}>
        <View style={{ flexDirection: 'row', borderBottomColor: '#ddd', borderBottomWidth: 1 }}>
          <View style={{ flex: 1, paddingLeft: 20, paddingVertical: 20, justifyContent: 'center' }}>
            <Text style={{ fontSize: 10, color: '#333' }}>Today's Date</Text>
            <Text style={{ fontSize: 18, color: '#333' }}>{new Date().getMonth() + 1 + '/' + new Date().getDate() + '/' + new Date().getFullYear()}</Text>
          </View>

          <TouchableOpacity style={{ flex: 1, paddingRight: 20, paddingVertical: 20, justifyContent: 'center', alignItems: 'flex-end' }} onPress={() => { this.setModalVisible(false), this.setState({ info: false }) }}>
            <AntDesign name={'closecircleo'} size={40} color={'#333'} />
          </TouchableOpacity>

        </View>
        <View style={{ flex: 1, display: this.state.stopped == true ? 'flex' : 'none', paddingLeft: 20, paddingVertical: 20, justifyContent: 'center', borderBottomColor: '#ddd', borderBottomWidth: 1 }}>
          <Text style={{ fontSize: 10, color: '#333' }}>Total Time</Text>
          <Text style={{ fontSize: 18, color: '#333' }} >{this.formatRemainingSeconds(this.state.remainingSeconds)}</Text>
        </View>
        <View style={{ flex: 1, paddingLeft: 20, paddingVertical: 20, justifyContent: 'center', borderBottomColor: '#ddd', borderBottomWidth: 1 }}>
          <Text style={{ fontSize: 10, color: '#333' }}>Client Name</Text>
          <TextInput
            onChangeText={(client) => this.setState({ client })}
            value={this.state.client}
            style={{ fontSize: 18, color: '#333' }} placeholder={'Enter Name'} numberOfLines={1} />
        </View>

        <View style={{ flexDirection: 'row', borderBottomColor: '#ddd', borderBottomWidth: 1 }}>
          <View style={{ flex: 0.5, paddingLeft: 20, paddingVertical: 20, justifyContent: 'center' }}>
            <Text style={{ fontSize: 10, color: '#333' }}>Pet Name</Text>
            <TextInput
              onChangeText={(text) => {
                let pets = this.state.pets
                pets['pet'] = text
                this.setState({ pets });
              }}
              value={this.state.pets['pet']}
              style={{ fontSize: 18, color: '#333' }} placeholder={'Enter Name'} numberOfLines={1} />
          </View>
          <View style={{ flex: 0.5, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
              <Text style={{ fontSize: 26 }}> 💩 </Text>
              <TouchableOpacity style={{ borderWidth: 3, borderColor: '#333', height: 25, width: 25, borderRadius: 3, alignItems: 'center', justifyContent: 'center' }}
                onPress={
                  () => {
                    this.setState({ ['checkin0']: !this.state['checkin0'] });
                  }}
              >
                <Feather name={'check'} size={25} color={'#333'} style={{ display: this.state['checkin0'] == true ? 'flex' : 'none' }} />
              </TouchableOpacity>
            </View>
            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
              <Text style={{ fontSize: 26 }}> 💧 </Text>
              <TouchableOpacity style={{ borderWidth: 3, borderColor: '#333', height: 25, width: 25, borderRadius: 3, alignItems: 'center', justifyContent: 'center' }}
                onPress={
                  () => {
                    this.setState({ ['checked0']: !this.state['checked0'] });
                  }}
              >
                <Feather name={'check'} size={25} color={'#333'} style={{ display: this.state['checked0'] == true ? 'flex' : 'none' }} />
              </TouchableOpacity>
            </View>
          </View>
        </View>

        {this.items()}

        <View style={{ flex: 1, alignItems: 'center' }}>
          <TouchableOpacity style={{ flex: 1, width: 160, height: 50, paddingVertical: 20, justifyContent: 'center', alignItems: 'center', margin: 20, borderRadius: 15, backgroundColor: '#008eff' }} onPress={() => this.setState({ clues: [...this.state.clues, 'item'] })}>
            <Text style={{ fontSize: 18, color: '#fff' }} >Add Pet</Text>
          </TouchableOpacity>
        </View>

        <View style={{ padding: 10 }}>
          <Text style={{ fontSize: 10, color: '#333' }}>Notes:</Text>
          <TextInput style={{ fontSize: 16, color: '#333', justifyContent: 'flex-start' }} value={this.state.notes} onChangeText={(text) => this.setState({ notes: text })} placeholder={'Enter Notes'} multiline={true} />
        </View>
        {this.state.stopped == true ? (
          <View style={{ flexDirection: 'row' }}>
            <TouchableOpacity
              style={{
                flex: 1,
                width: '90%',
                paddingVertical: 20,
                justifyContent: 'center',
                alignItems: 'center',
                margin: 20,
                borderRadius: 15,
                backgroundColor: 'red'
              }}
              onPress={
                () => { this.finishUp() }
              }>
              <Text style={{ fontSize: 18, color: '#fff', fontWeight: 'bold' }} >Save</Text>
            </TouchableOpacity>
          </View>

        ) : this.state.info == false ? (
          <TouchableOpacity
            style={{
              flex: 1,
              paddingVertical: 20,
              justifyContent: 'center',
              alignItems: 'center',
              margin: 20,
              borderRadius: 15,
              backgroundColor: '#58c751'
            }}
            onPress={
              () => { this.handleStart(), this.setModalVisible(false), this.handleAwake(), this.setState({ start: false, timeIn: this.formatAMPM(new Date()) }) }
            }>
            <Text style={{ fontSize: 18, color: '#fff', fontWeight: 'bold' }} >Start Visit</Text>
          </TouchableOpacity>
        ) : null}

      </ScrollView>
    )
  }

  locked() {
    return (
      <View style={{ flex: 1, backgroundColor: '#00000080', justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity onPress={() => { this.setState({ locked: false }), this.setModalVisible(false) }} >
          <Feather name={'unlock'} size={30} color={'#fff'} />
        </TouchableOpacity>
      </View>
    )
  }

  getPets = () => {
    const pets = this.state.pets
    return Object.keys(pets).map((key, index) => {
      return (
        <View key={'ii' + index} style={{ justifyContent: 'center', height: 30, width: '100%', flexDirection: 'row' }}>
          <View style={{ height: 30, width: '30%' }}>
            <Text style={{ color: '#fff', fontSize: 23 }}>{pets[key]}</Text>
          </View>
          <View style={{ height: 30, width: '40%' }}>
            <View style={{ width: '100%', justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
              <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                <Text style={{ fontSize: 26 }}> 💩 </Text>
                <View style={{ borderWidth: 3, borderColor: '#fff', height: 25, width: 25, borderRadius: 3, alignItems: 'center', justifyContent: 'center' }}>
                  <Feather name={'check'} size={25} color={'#fff'} style={{ display: this.undefinedToNull(this.state['checkin' + index]) == true ? 'flex' : 'none' }} />
                </View>
              </View>
              <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                <Text style={{ fontSize: 26 }}> 💧 </Text>
                <View style={{ borderWidth: 3, borderColor: '#fff', height: 25, width: 25, borderRadius: 3, alignItems: 'center', justifyContent: 'center' }}>
                  <Feather name={'check'} size={25} color={'#fff'} style={{ display: this.undefinedToNull(this.state['checked' + index]) == true ? 'flex' : 'none' }} />
                </View>
              </View>
            </View>
          </View>
        </View>
      )
    })
  }

  undefinedToNull = (item) => {
    if (item == true) {
      return true
    } else {
      return false
    }
  }

  render() {
    const ItemMini = () => (
      <View style={{ paddingHorizontal: 20 }}>
        <Text style={{ fontSize: 20, color: '#333', marginBottom: 10, }}>Current Visit</Text>
        <View style={{ flexDirection: 'row', height: 70 }}>
          <View style={{ flex: 1, }}>
            <Text style={{ fontSize: 30, color: '#333', fontWeight: 'bold' }}>{parseFloat(this.state.distanceTravelled * 1.609).toFixed(2)}<Text style={{ fontSize: 16, fontWeight: '400' }}>mi</Text></Text>
            <Text style={{ fontSize: 10, color: '#565252' }}>Distance</Text>
          </View>
          <View style={{ flex: 1, alignItems: 'flex-end' }}>
            <Text style={{ fontSize: 30, color: '#333', fontWeight: 'bold' }}>{this.formatRemainingSeconds(this.state.remainingSeconds)}</Text>


            <Text style={{ fontSize: 10, color: '#565252' }}>Time</Text>
          </View>

        </View>

        {this.state.start == true ? (
          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
            <TouchableOpacity style={{ marginHorizontal: 20, width: '90%', height: 70, borderRadius: 15, backgroundColor: '#008eff', justifyContent: 'center', alignItems: 'center' }} onPress={() => { this.setModalVisible(true) }}>
              <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 18 }}>Open Form</Text>
            </TouchableOpacity>
          </View>
        ) : (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <TouchableOpacity style={{ marginHorizontal: 20, width: '90%', height: 70, borderRadius: 15, backgroundColor: '#f44336', justifyContent: 'center', alignItems: 'center' }} onPress={() => { this.takePictureAndCreateAlbum2().then(this.setModalVisible(true), this.handleStop(), this.setState({ stopped: true })) }}>
                <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 18 }}>End Visit</Text>
              </TouchableOpacity>
            </View>
          )}



      </View>
    )



    return (
      <View style={styles.container}>
        {this.state.Screeny == true ? (
          <ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }} style={{
            width: 540,
            height: 960,
            zIndex: 2
          }}>
            <TouchableHighlight style={{ flex: 1 }} onPress={() => this.takePictureAndCreateAlbum()}>
              <ImageBackground
                source={require('./assets/bg-repeat.png')}
                style={{ flex: 1 }}
                resizeMode={'repeat'}
              >
                <View style={{ height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center', padding: 70 }}>
                  <View style={{ flex: 1, height: '100%', width: '100%', alignItems: 'center', backgroundColor: '#000000C0', padding: 10, borderRadius: 15 }}>

                    <View style={{ height: 160, width: '100%', flexDirection: 'row', justifyContent: 'center' }}>
                      <View style={{ alignItems: 'flex-start', justifyContent: 'center', height: 160, width: 120 }}>
                        <Image source={require('./assets/logoprint.png')} resizeMode={'contain'} style={{ width: '100%', }} />
                      </View>
                        <View style={{ alignItems: 'center', justifyContent: 'center', height: 160, paddingLeft: 20 }}>
                          <Text style={{ color: '#fff', fontSize: 30 }}>Visit Summary</Text>
                          <Text style={{ color: '#fff', fontSize: 30 }}>{new Date().getMonth() + 1 + '/' + new Date().getDate() + '/' + new Date().getFullYear()}</Text>
                          <Text style={{ color: '#fff', fontSize: 30 }}>{this.state.client}</Text>
                        </View>

                    </View>

                    <View style={{ alignItems: 'center', justifyContent: 'center', height: 100, width: '100%', flexDirection: 'row' }}>
                          <View style={{ alignItems: 'center', justifyContent: 'center', width: '50%' }}>
                            <Text style={{ color: '#fff', fontSize: 23 }}>Time In</Text>
                            <Text style={{ color: '#fff', fontSize: 23 }}>{this.state.timeIn}</Text>
                          </View>
                          <View style={{ alignItems: 'center', justifyContent: 'center', width: '50%' }}>
                            <Text style={{ color: '#fff', fontSize: 23 }}>Time Out</Text>
                            <Text style={{ color: '#fff', fontSize: 23 }}>{this.state.timeOut}</Text>
                          </View>

                        </View>
                    <View style={{ alignItems: 'center', justifyContent: 'center', height: 100, width: '100%' }}>
                      {this.getPets()}
                    </View>
                    <View style={{ alignItems: 'center', justifyContent: 'center', height: 180, width: '90%' }}>
                      <Text style={{ color: '#fff', fontSize: 23 }}>{this.state.notes}</Text>
                    </View>
                    <View style={{ alignItems: 'center', justifyContent: 'center', height: 260, width: '100%', backgroundColor: '#000', borderRadius: 15, overflow: 'hidden' }}>
                      <Image source={{ uri: this.state.viewShot2 }} resizeMode={'cover'} style={{ width: '100%', height: '100%' }} />
                      <View style={{ width: 80, height: 45, position: 'absolute', top: 0, right: 0, backgroundColor: '#fff', borderBottomLeftRadius: 15, borderColor: '#333', borderBottomWidth: 1, borderLeftWidth: 1, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ color: '#888', fontSize: 18 }}>{parseFloat(this.state.distanceTravelled / 1.609).toFixed(2)} mi</Text>
                      </View>
                    </View>


                  </View>
                </View>
              </ImageBackground>
            </TouchableHighlight>
          </ViewShot>
        ) : (
            <View style={{ flex: 1, width: '100%', height: '100%' }}>
              <Modal animationType="slide"
                transparent={this.state.locked}
                visible={this.state.modalVisible}>
                {this.state.locked == true ? (
                  this.locked()
                ) : (
                    this.ItemFull()
                  )}
              </Modal>

              <View style={{ position: 'absolute', zIndex: 2, left: 0, bottom: 10, right: 0 }}>
                <ItemMini />
              </View>
              <ViewShot ref="viewShot2" options={{ format: "jpg", quality: 0.9 }} style={{ flex: 1 }}>
                <MapView
                  provider={PROVIDER_GOOGLE}
                  customMapStyle={customData}
                  style={{ alignSelf: 'stretch', height: '100%' }}
                  region={this.state.switched == true ? this.state.mapRegion : this.state.mapRegion2}
                  onRegionChangeComplete={(nonn) => { this.setState({ mapRegion: nonn }) }}
                >
                  <MapView.Polyline
                    coordinates={this.state.routeCoordinates}
                    strokeWidth={5}
                    strokeColor={'#19B5FE'}
                  />
                  {true && (
                    <MapView.Circle
                      center={this.state.position}
                      radius={40}
                      strokeColor={'transparent'}
                      fillColor={'#00a5ff40'}
                    />
                  )}
                  {true && (
                    <MapView.Circle
                      center={this.state.position}
                      radius={12}
                      strokeColor={'transparent'}
                      fillColor={'#00a5ff'}
                    />
                  )}

                </MapView>
              </ViewShot>
              <TouchableOpacity onPress={() => { this.setModalVisible(true), this.setState({ info: true }) }} style={{ position: 'absolute', top: 60, right: 30 }} >
                <Feather name={'info'} size={40} color={'#f44336'} />
              </TouchableOpacity>
              <TouchableOpacity onPress={() => { console.warn(test) }} style={{ position: 'absolute', top: 60, left: 30 }} >
                <Feather name={'lock'} size={40} color={'#333'} />
              </TouchableOpacity>
              <LinearGradient colors={['#ffffff00', '#ffffff']} style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 500 }} />
            </View>
          )}
      </View>
    );
  }
}

TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
  if (error) {
    // Error occurred - check `error.message` for more details.
    return;
  }
  if (position) {
    App = new App

    App.handleLocationChange(position)
    // do something with the locations captured in the background
  }
});


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});