// React dependencies
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

// Provides native map implimentation
import MapView from "react-native-maps";

// Stateless components
import Loading from "../Components/UI/States/Loading";

// Supermarket data
import Locations from "../../supermarkets.json";

// Styled-Components can provide this so a custom react-native view needed to be provided.
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "flex-end",
    alignItems: "center"
  },
  map: {
    ...StyleSheet.absoluteFillObject
  }
});

export default class ItemTracking extends Component {
  state = {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0,
    longitudeDelta: 0,
    isLoading: true,
    isDark: false
  };

  calculateDeltas = () => {
    navigator.geolocation.getCurrentPosition(
      position => {
        const oneDegreeOfLongitudeInMeters = 111.32 * 1000;
        const circumference = (40075 / 360) * 1000;

        const latDelta =
          position.coords.accuracy *
          (1 / (Math.cos(position.coords.latitude) * circumference));

        const lonDelta =
          position.coords.accuracy / oneDegreeOfLongitudeInMeters;

        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: Math.max(0, latDelta),
          longitudeDelta: Math.max(0, lonDelta)
        });
      },
      error => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  };

  // Filter function (NOT WORKING)
  checkSupermarketLocations = async () => {
    const copyOfSuperMarkets = [...Locations];

    copyOfSuperMarkets.filter(
      location =>
        location.Lat <= this.state.longitude &&
        location.Lng <= this.state.longitude
    );

    console.log(copyOfSuperMarkets);
  };

  async componentDidMount() {
    navigator.geolocation.watchPosition(
      async position => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        });
      },
      error => console.log(`Error ${error}`),
      { enableHighAccuracy: true, maximumAge: 300000 },
      this.setState({
        latitudeDelta: 0.009,
        longitudeDelta: 0.009,
        isLoading: false
      })
    );

    // The check occurs on component mount (This is where the filter function is called)
    this.checkSupermarketLocations();
  }

  render() {
    if (this.state.isLoading) {
      return <Loading isDark={this.state.isDark} />;
    }

    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          region={{
            latitude: this.state.latitude,
            longitude: this.state.longitude,
            latitudeDelta: this.state.latitudeDelta,
            longitudeDelta: this.state.longitudeDelta
          }}
          showsUserLocation={true}
          loadingEnabled={true}
          minZoomLevel={8}
          maxZoomLevel={19}
          onRegionChange={this.calculateDeltas} // when the device goes to a different regios recalculate
          // onUserLocationChange={this.checkSupermarketLocations} // Checks for supermarkets
        />
      </View>
    );
  }
}