<template>
  <div>
    <!-- input search box for google places autocomplete -->
    <div class="search-box">
      <GMapAutocomplete
        placeholder="Search for a location"
        @place_changed="setPlace"
        style="font-size: medium; z-index: 999999999"
      >
      </GMapAutocomplete>
    </div>

    <!-- rendering the map on the page -->
    <GMapMap
      :center="coords"
      :zoom="18"
      map-type-id="terrain"
      style="height: 20rem"
    >
      <!-- Marker to display the searched location -->
      <GMapMarker
        :key="markerDetails.id"
        :position="markerDetails.position"
        :clickable="true"
        :draggable="true"
        ref="markerRef"
        @click="openMarker(markerDetails.id)"
        @dragend="changeMarker"
      >
        <!-- InfoWindow to display the searched location details -->
        <GMapInfoWindow
          v-if="locationDetails.address != ''"
          :closeclick="true"
          @closeclick="openMarker(null)"
          :opened="openedMarkerID === markerDetails.id"
          :options="{
            pixelOffset: {
              width: 10,
              height: 0,
            },
            maxWidth: 320,
            maxHeight: 320,
          }"
        >
          <div class="location-details">
            <h3>Location Details</h3>
            <p>Address: {{ locationDetails.address }}</p>
            <p>
              URL:
              <a :href="locationDetails.url" target="_blank">
                {{ locationDetails.url }}</a
              >
            </p>
          </div>
        </GMapInfoWindow>
      </GMapMarker>
    </GMapMap>
  </div>
</template>


<script>
import { onMounted, ref, watch } from "vue";

export default {
  name: "Map",
  emits: ["update:modelValue"],
  props: ['option','value'],

  setup(props, context) {
    // Setting the default coordinates to Phnom Penh
    const coords = ref({ lat: 11.5564, lng: 104.9282});
    // Marker
    const markerRef = ref();
    // Marker Details
    const markerDetails = ref({
      id: 1,
      position: coords.value,
    });
    const openedMarkerID = ref(null);

    // Places Details
    const locationDetails = ref({
      address: "",
      url: "",
      lat: 0,
      lng: 0,
    });

    // Get users current location using the browser's geolocation API
    const getUserLocation = () => {
      // Check if Geolocation is supported by the browser
      const isSupported = "navigator" in window && "geolocation" in navigator;
      if (isSupported) {
        // Retrieve the user's current position
        navigator.geolocation.getCurrentPosition((position) => {
          coords.value.lat = position.coords.latitude;
          coords.value.lng = position.coords.longitude;
        });
      }
    };

    // Set the location based on the place selected
    const setPlace = (place) => {
      coords.value.lat = place.geometry.location.lat();
      coords.value.lng = place.geometry.location.lng();

      // Update the location details
      locationDetails.value.address = place.formatted_address;
      locationDetails.value.url = place.url;
      locationDetails.value.lat = coords.value.lat;
      locationDetails.value.lng = coords.value.lng;
      context.emit("update:modelValue", locationDetails.value);
    };

    // Open the marker info window
    const openMarker = (id) => {
      openedMarkerID.value = id;
    };

    const changeMarker = (event) => {
      locationDetails.value.lat = event.latLng.lat();
      locationDetails.value.lng = event.latLng.lng();
      context.emit("update:modelValue", locationDetails.value);
    };
    watch(() => props.option, (newvalue) => {
        coords.value = newvalue
        markerDetails.value.position = coords.value
    });
    return {
      coords,
      markerDetails,
      openedMarkerID,
      openMarker,
      getUserLocation,
      setPlace,
      locationDetails,
      changeMarker,
      markerRef,
    };
  },
};
</script>
<style>
.search-box {
  margin: 0px 0px 10px 0px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
input.pac-target-input {
  width: 100%;
  border: 2px solid rgb(224, 224, 224);
  padding: 5px 3px;
  border-radius: 5px;
}
.location-details {
  color: black;
  font-size: 12px;
  font-weight: 500;
}
.pac-container {
  z-index: 999999999 !important;
}
</style>