import { useMemo as k, useState as L, useEffect as r } from "react";
import { createPortal as M } from "react-dom";
import { useGoogleMap as E } from "./index-map-context.js";
const x = (p) => {
  const {
    onClick: s,
    onMouseOver: a,
    onMouseOut: i,
    id: u,
    zIndex: o,
    pos: t,
    title: f,
    draggable: l,
    onDragEnd: m,
    children: v
  } = p, c = E(), d = k(() => document.createElement("div"), []), [e, g] = L(null);
  return r(() => {
    if (isNaN(t.lat) || isNaN(t.lng)) return;
    const n = new google.maps.marker.AdvancedMarkerElement({
      map: c,
      position: t,
      content: d,
      zIndex: o,
      title: f,
      gmpDraggable: l
    });
    return g(n), () => {
      n.map = null, g(null);
    };
  }, [c]), r(() => {
    e && (e.position = t);
  }, [e, t.lat, t.lng]), r(() => {
    e && o !== void 0 && (e.zIndex = o);
  }, [e, o]), r(() => {
    e && (e.gmpDraggable = !!l);
  }, [e, l]), r(() => {
    if (!e || !s) return;
    const n = e.addListener("click", () => s(u));
    return () => {
      google.maps.event.removeListener(n);
    };
  }, [e, s, u]), r(() => {
    if (!e || !a) return;
    const n = e.addListener("mouseover", a);
    return () => {
      google.maps.event.removeListener(n);
    };
  }, [e, a]), r(() => {
    if (!e || !i) return;
    const n = e.addListener("mouseout", i);
    return () => {
      google.maps.event.removeListener(n);
    };
  }, [e, i]), r(() => {
    if (!e || !m) return;
    const n = e.addListener("dragend", m);
    return () => {
      google.maps.event.removeListener(n);
    };
  }, [e, m]), M(v, d);
};
export {
  x as GoogleMapsAdvancedMarker
};
