import { useMapStore } from "_store/mapStore";
import { useEffect } from "react";
import { Popup, useMap } from "react-leaflet";

export const ContextMenu = () => {
	const map = useMap();
	const { popup, map: mapStore, setPopup } = useMapStore();

	useEffect(() => {
		map.on("contextmenu", (e) => {
			setPopup({ isOpen: true, lat: e.latlng.lat, lng: e.latlng.lng });
		});
	}, [popup]);

	if (!popup) return null;

	return (
		<Popup position={[popup.lat, popup.lng]}>
			<div className="w-60">
				<h1>Context Menu</h1>
			</div>
		</Popup>
	);
};