import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  Alert,
  NetInfo,
  Geolocation,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
  Image
} 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 { 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 theme from "../../config/colors";
import Size from "../../config/size";
import { Fonts } from "../../config/fonts";
import MyStatusBar from "../../components/Public/statusBar";
const asyncStorageHelper = new AsyncStorageHelper();
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 size = new Size();
@observer
@inject(["menuStore"], ["userStore"])
export default class GoogleAutoComplete extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }

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

    return index;
  }
  onTextChange(id) {
    this.locationRef._onBlur();
    this.locationRef.setAddressText(
      this.userStore.pickupPointLabel[this.getIndex(id)].value
    );
  }

  componentWillUnmount() {
    if (this.props.onRef) {
      this.props.onRef(undefined);
    }
  }

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

   return index
   
   }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
    // this.secondTextInput.blur();
  }

  render() {
    console.log("pickupPointId " + this.userStore.pickupPointId);
    return (
      <View
        style={{
          alignItems: "center",
          backgroundColor: theme.mainColor
        }}
      >
        <GooglePlacesAutocomplete
          ref={instance => {
            this.locationRef = instance;
          }}
          placeholder={this.userStore.text.googleSearch}
          placeholderTextColor="white"
          placeholderStyle={{ fontFamily: Fonts.century, fontWeight: "bold" }}
          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.props.onPress && this.props.onPress(data, details);
            console.log(details)
          }}
          textInputProps={{
            onFocus: () => {
              this.props.onFocus && this.props.onFocus();
            }
            // onBlur:() => {
            //   this.props.onBlur && this.props.onBlur();

            // },
            // onEndEditing:() => {
            //   this.props.onEndEditing && this.props.onEndEditing();
            // },
          }}
          getDefaultValue={() =>
            this.userStore.pickupPointLabel[this.getIndex(this.userStore.pickupPointId)]
              .value
          }
          
          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.props.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>
    );
  }
}