import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { useMap } from 'react-leaflet';
import L from 'leaflet';

// Replacement for react-leaflet-control (v1-only): mounts a Leaflet control at
// the given corner and portals arbitrary React children into it. Click/scroll
// on the control no longer pans/zooms the map underneath.
const MapControl = ({ position = 'topright', children }) => {
  const map = useMap();
  const [container, setContainer] = useState(null);

  useEffect(() => {
    const ReactControl = L.Control.extend({
      onAdd: () => {
        const div = L.DomUtil.create('div', 'leaflet-control leaflet-control-react');
        L.DomEvent.disableClickPropagation(div);
        L.DomEvent.disableScrollPropagation(div);
        setContainer(div);
        return div;
      },
      onRemove: () => setContainer(null)
    });
    const control = new ReactControl({ position });
    control.addTo(map);
    return () => control.remove();
  }, [map, position]);

  return container ? createPortal(children, container) : null;
};

export default MapControl;