// HLP Raf — Selector de ubicación con pin arrastrable (Google Maps)
// Muestra un mapa con un marcador que el cliente puede arrastrar / tocar para
// marcar el punto exacto. Si no hay key de Maps o falla la carga, avisa arriba.
function PinPicker({ coords, accent, onChange, height = 240 }) {
const boxRef = React.useRef(null);
const markerRef = React.useRef(null);
const [status, setStatus] = React.useState("loading"); // loading | ok | error
const onChangeRef = React.useRef(onChange);
onChangeRef.current = onChange;
React.useEffect(() => {
let cancelled = false;
if (!window.hlprafMaps || !hlprafMaps.hasMapsKey()) { setStatus("error"); return; }
hlprafMaps.loadGoogleMaps().then((g) => {
if (cancelled || !boxRef.current) return;
const center = { lat: coords.lat, lng: coords.lng };
const map = new g.maps.Map(boxRef.current, {
center, zoom: 16, disableDefaultUI: true, zoomControl: true,
gestureHandling: "greedy", clickableIcons: false,
});
const marker = new g.maps.Marker({
position: center, map, draggable: true, animation: g.maps.Animation.DROP,
});
const emit = (latLng) => onChangeRef.current({ lat: latLng.lat(), lng: latLng.lng() });
marker.addListener("dragend", () => emit(marker.getPosition()));
map.addListener("click", (e) => { marker.setPosition(e.latLng); emit(e.latLng); });
markerRef.current = marker;
setStatus("ok");
}).catch(() => { if (!cancelled) setStatus("error"); });
return () => { cancelled = true; };
}, []);
if (status === "error") {
return (
No se pudo cargar el mapa acá. Tu dirección igual quedó registrada y el depósito confirma la ubicación antes de salir.
);
}
return (
📍 Arrastrá el pin al lugar exacto de tu casa.
{status === "loading" && (
Cargando mapa…
)}
);
}
Object.assign(window, { PinPicker });