<script setup>
import { watch } from "vue";
import { bindGoogleMapsEvents, useGoogleMapsResource } from "./useGoogleMapsResource";
const props = defineProps({
  options: { type: Object, required: false }
});
const emit = defineEmits(["center_changed", "radius_changed", "click", "dblclick", "drag", "dragend", "dragstart", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "rightclick"]);
const eventsWithoutPayload = [
  "center_changed",
  "radius_changed"
];
const eventsWithMapMouseEventPayload = [
  "click",
  "dblclick",
  "drag",
  "dragend",
  "dragstart",
  "mousedown",
  "mousemove",
  "mouseout",
  "mouseover",
  "mouseup",
  "rightclick"
];
const circle = useGoogleMapsResource({
  create({ mapsApi, map }) {
    const c = new mapsApi.Circle({ map, ...props.options });
    bindGoogleMapsEvents(c, emit, {
      noPayload: eventsWithoutPayload,
      withPayload: eventsWithMapMouseEventPayload
    });
    return c;
  },
  cleanup(c, { mapsApi }) {
    mapsApi.event.clearInstanceListeners(c);
    c.setMap(null);
  }
});
watch(() => props.options, (options) => {
  if (circle.value && options) {
    circle.value.setOptions(options);
  }
}, { deep: true });
</script>

<template>

</template>
