import { useEffect } from 'react';
import { useMap, useMapEvents } from 'react-leaflet';

// v4 replaces the v1 `ref`/`.leafletElement` + handleLeafletLoad pattern: this
// child runs inside <MapContainer> and hands the ready Leaflet map to a class
// parent once, so the parent can drive it imperatively (setView, fitBounds,
// graphicScale, subsUnion, …).
export const MapReady = ({ onReady }) => {
  const map = useMap();
  useEffect(() => {
    if (onReady) onReady(map);
    // run once per map instance
  }, [map]); // eslint-disable-line react-hooks/exhaustive-deps
  return null;
};

// Bridges Leaflet map events to callbacks (replaces the v1 onMoveend /
// onViewportChanged / onZoomend props on <Map>).
export const MapEvents = ({ handlers }) => {
  useMapEvents(handlers || {});
  return null;
};