import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  Alert,
  NetInfo,
  Geolocation,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
  Image,
  ImageBackground
} from "react-native";
import Header from "../../components/Public/header";
import Text from "react-native-text";
import { SearchBar } from "react-native-elements";
import { observer, inject } from "mobx-react/native"
import { Fonts } from "../../config/fonts";;
import { observable, transaction } from "mobx";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import { width, height } from "../../config/screen";
import MapView, { Polyline } from "react-native-maps";
import MapViewDirections from "react-native-maps-directions";
import AsyncStorageHelper from "../../config/asyncStorageHelper";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { ifIphoneX } from 'react-native-iphone-x-helper'
import theme from "../../config/colors";
import FastImage from "react-native-fast-image";
import MyStatusBar from "../../components/Public/statusBar";
const asyncStorageHelper = new AsyncStorageHelper();
import Log from '../../config/log'
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
const origin = { latitude: 22.320508, longitude: 114.170222 };
const destination = { latitude: 22.320568, longitude: 114.171273 };
const GOOGLE_MAPS_APIKEY = "AIzaSyBM8eEWcSWBuZcM0lGH_JSoDjgImlqHwPs";
const log = new Log()
export const getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      position => resolve(position),
      e => reject(e)
    );
  });
};

@inject(["menuStore"], ["userStore"])
@observer
export default class LocationRequest extends Component {
  @observable
  markerId = null;
  title = "";
  pickUpPointLoaction = { latitude: 0, longitude: 0 };
  perdefinedPlaces = [];

  static navigationOptions = {
    drawerLabel: "My Orders"
  };

  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
    this.state = {
      region: {
        latitude: null,
        longitude: null,
        latitudeDelta: 1,
        longitudeDelta: 1
      }
    };
  }

  navigatieAction(page) {
    this.props.navigation.navigate(page);
  }

  _requestPermission() {
    Permissions.request("location").then(response => {
     
      if (
        response == "allow" ||
        response == "restricted" ||
        response == "authorized"
      ) {
        navigator.geolocation.getCurrentPosition(
          position => {
            this.userStore.userLocation = position;
            console.log(position);
          //  self.navigatieAction("LocationRequest");
          },
          error => {
            console.log(error);
          //  self.navigatieAction("LocationRequest");
          },
          { enableHighAccuracy: false, timeout: 4000, maximumAge: 10000 }
        );
      } else {
      //  self.navigatieAction("LocationRequest");
      }
    });
  }

  onClickAction(data, details) {
    this.map.animateToRegion({
      latitude: details.geometry.location.lat,
      longitude: details.geometry.location.lng,
      latitudeDelta: 0.02,
      longitudeDelta: 0.02
    });

    for (var i = 0; i < this.userStore.perdefinedPlaces.length; i++) {
      if (
        this.userStore.perdefinedPlaces[i].geometry.location.lat ==
          details.geometry.location.lat &&
        this.userStore.perdefinedPlaces[i].geometry.location.lng ==
          details.geometry.location.lng
      ) {
        this.markerId = this.userStore.perdefinedPlaces[i].id
        break;
      }
    }

    console.log(details);
  }

  googlePlacesAutoComplete() {
    return (
      <View

        style={{
          position: "absolute",
          top: 0,
          backgroundColor: theme.mainColor,
          ...ifIphoneX(
            {
              //height:'10%'
            },{

            }
          )
        }}
      >
       
          <GooglePlacesAutocomplete
            placeholder={this.userStore.text.googleSearch}
            placeholderTextColor="white"
            minLength={1} // minimum length of text to search
            autoFocus={false}
            returnKeyType={"search"} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
            listViewDisplayed="false" // true/false/undefined
            fetchDetails={true}
            renderDescription={row => row.description} // custom description render
            onPress={(data, details = null) => {
              this.onClickAction(data, details);
            }}
            getDefaultValue={() => ""}
            query={{
              // available options: https://developers.google.com/places/web-service/autocomplete
              key: GOOGLE_MAPS_APIKEY,
              language: "zh-TW||en", // language of the results
              types: ["(cities)", "(country)"],
              components: "country:hk" // default: 'geocode'
            }}
            styles={{
              textInputContainer: {
                backgroundColor: theme.mainColor,
                borderTopWidth: 0,
                borderBottomWidth: 0,
                width: width,
                paddingRight: 20,
                paddingLeft: 20,
                marginBottom: 10
              },
              textInput: {
                textAlign: "center",
                height: verticalScale(40),
                color: "white",
                fontSize: 16,
                borderWidth: 0,
                backgroundColor: theme.searchMapInputColor,
                fontFamily: Fonts.century,
                fontWeight: "bold"
              },
              description: {
                fontWeight: "bold"
              },
              listView: {
                backgroundColor: "white"
              },
              predefinedPlacesDescription: {
                color: "#1faadb",
              }
            }}
            currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
            currentLocationLabel="Current location"
            nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
            GoogleReverseGeocodingQuery={
              {
                // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
              }
            }
            GooglePlacesSearchQuery={{
              // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
              rankby: "distance",
              types: "food"
            }}
            filterReverseGeocodingByTypes={[
              "locality",
              "administrative_area_level_3"
            ]} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
            predefinedPlaces={this.userStore.perdefinedPlaces}
            debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
            // renderLeftButton={()  => <Image source={require('path/custom/left-icon')} />}
            //renderRightButton={() => <Text>Custom text </Text>}
          />
   
      </View>
    );
  }

  getIndex(id) {
    var index = this.userStore.pickupPointLabel.findIndex(function(item, i) {
      return item.id == parseInt(id);
    });

    return index;
  }

  getUserLocation() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.userStore.userLocation = position;
      },
      error => {
        console.log(error);
      },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  }

  componentWillMount() {
    const { navigation } = this.props;
    this.title = navigation.getParam("title", "Location");
    this.pickUpPointLoaction = navigation.getParam("location", {
      latitude: 0,
      longitude: 0
    });
    this.setUserLocation();
    this.userStore.pickupLoactionPoint.data.content.forEach(element => {
      var place = {
        description: element.name,
        geometry: { location: { lat: element.lat, lng: element.lng } }
      };
      this.perdefinedPlaces.push(place);
    });
  }

  setUserLocation() {
    console.log(this.userStore.userLocation);
    if (this.userStore.userLocation === null) {
      this.setState({
        region: {
          latitude: 22.396427,
          longitude: 114.109497,
          latitudeDelta: 1,
          longitudeDelta: 1
        }
      });
    } else {
      this.setState({
        region: {
          latitude: this.userStore.userLocation.coords.latitude,
          longitude: this.userStore.userLocation.coords.longitude,

          latitudeDelta: 0.02,
          longitudeDelta: 0.02
        }
      });
    }
  }

  clickMarkerAction(id) {
    this.markerId = id;
  }

  confirmAction() {
    Alert.alert(
      "",
      "Select " +
        this.userStore.pickupPointLabel[this.getIndex(this.markerId)].value +
        "?",
      [
        { text: "Cancel", onPress: () => console.log("Cancel") },
        { text: "Yes", onPress: () => this.picked(this.markerId) }
      ]
    );
  }

  picked(id) {
    if(this.markerId != null){
    asyncStorageHelper.saveData("pickupPointId", id);
    this.userStore.pickupPointId = id;
    this.store.pickupPointId = id;
    log.firebaseLog("select_pickuppoint_first_time_start_app",{pickuppointid:id})
    this.store.getMenuItem(this);
    }
  }

  searchClear() {}

  searchChangeText() {}

  confirmButton() {
    if (!this.markerId) {
      return null;
    } else {
      return (
        <TouchableOpacity
          style={{
            height: verticalScale(60),
            width: width,
            backgroundColor: theme.mainColor,
            alignItems: "center",
            justifyContent: "center"
          }}
          onPress={() => this.confirmAction()}
        >
          <Text style={{ color: "white", fontWeight: "bold" }}>confirm</Text>
        </TouchableOpacity>
      );
    }
  }

  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
        <MyStatusBar
          backgroundColor={theme.mainColor}
          barStyle="light-content"
        />
        <View style={styles.container}>
          <MapView
            ref={ref => {
              this.map = ref;
            }}
            style={{ width: width, flex: 1 }}
            showsUserLocation={true}
            initialRegion={this.state.region}
          >
            {this.userStore.pickupPointLabel.map(marker => (
              <MapView.Marker
                coordinate={{ latitude: marker.lat, longitude: marker.lng }}
                title={marker.name}
                onPress={() => this.clickMarkerAction(marker.id)}
              >
      <Image
                resizeMode={"contain"}
                source={require("../../images/maplocator.png")}
                style={{ width: scale(50), height: scale(50) }}
              /> 
              </MapView.Marker>
            ))}
          </MapView>

          {this.confirmButton()}
          {this.googlePlacesAutoComplete()}
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});