import * as React from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
import MapView, {Callout, Circle, Marker} from 'react-native-maps';

export default function HouseLocation() {
  const [pin, setPin] = React.useState({
    latitude: 37.78825,
    longitude: -122.4324,
  });
  const [region, setRegion] = React.useState({
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });

  return (
    <View style={styles.viewRoot}>
      <View>
        <Text style={styles.heading}>Locate your House</Text>
        <View>
          <GooglePlacesAutocomplete
            placeholder="Search"
            fetchDetails={true}
            GooglePlacesSearchQuery={{
              rankby: 'distance',
            }}
            onPress={(data, details = null) => {
              // 'details' is provided when fetchDetails = true
              console.log(data, details);
              setRegion({
                latitude: details.geometry.location.lat,
                longitude: details.geometry.location.lng,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
              });
            }}
            query={{
              key: 'AIzaSyCkyKVuTyTW8qIcmXuo-btO4lI0VzojzBE',
              language: 'en',
              components: 'country:in',
              types: 'establishment',
              radius: 30000,
              location: `${region.latitude}, ${region.longitude}`,
            }}
            placeholderTextColor={'#845783'}
            styles={{
              container: {
                width: '100%',
                position: 'absolute',
                zIndex: 1,
              },
              listView: {backgroundColor: 'white', color: 'blue'},
            }}
          />
        </View>
      </View>
      <View>
        <MapView
          style={styles.map}
          region={{
            latitude: region.latitude,
            longitude: region.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          provider="google">
          <Marker
            coordinate={{
              latitude: region.latitude,
              longitude: region.longitude,
            }}
          />
        </MapView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  viewRoot: {
    backgroundColor: '#ffffff',
    height: '100%',
  },
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  heading: {
    color: '#1C254E',
    fontSize: 30,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Bold',
  },
});