import { MapMarker } from "./MapMarker.mjs";
import React, { useEffect, useMemo } from "react";
import { CircleMarker, Popup, useMap } from "react-leaflet";
import { latLngBounds } from "leaflet";
import MarkerClusterGroup from "react-leaflet-markercluster";
import "react-leaflet-markercluster/dist/styles.min.css";
//#region src/maps/leafletMaps/ui/MapContent.jsx
const MapContent = ({ data, IconComponent, onClick, onMouseOver, onMouseOut, highlightMarkersOnClick, PopupComponent, children, useDefaultMarker, useMarkerClustering }) => {
	const map = useMap();
	const markerComponents = useMemo(() => {
		return data && data.map((item, index) => {
			const { lat, long, iconProps, popupProps, rawData } = item;
			return useDefaultMarker ? /* @__PURE__ */ React.createElement(CircleMarker, {
				key: index,
				center: [lat, long],
				radius: 5,
				eventHandlers: {
					click: () => {
						onClick && onClick(rawData);
					},
					mouseover: (e) => {
						onMouseOver && onMouseOver();
						e.target.openPopup();
					},
					mouseout: (e_0) => {
						onMouseOut && onMouseOut();
						e_0.target.closePopup();
					}
				},
				color: iconProps.color ?? "#0000FF"
			}, PopupComponent ? /* @__PURE__ */ React.createElement(Popup, { closeButton: false }, /* @__PURE__ */ React.createElement(PopupComponent, popupProps)) : null) : /* @__PURE__ */ React.createElement(MapMarker, {
				key: index,
				position: [lat, long],
				iconComponent: IconComponent && /* @__PURE__ */ React.createElement(IconComponent, iconProps),
				onClick: () => onClick && onClick(rawData),
				onMouseOver: () => onMouseOver && onMouseOver(),
				onMouseOut: () => onMouseOut && onMouseOut(),
				highlight: highlightMarkersOnClick
			}, children && children, PopupComponent ? /* @__PURE__ */ React.createElement(Popup, { closeButton: false }, /* @__PURE__ */ React.createElement(PopupComponent, popupProps)) : null);
		});
	}, [data]);
	useEffect(() => {
		let markerBounds = latLngBounds([]);
		if (data.length && data.length > 0) {
			data.forEach((item_0) => {
				markerBounds.extend([item_0.lat, item_0.long]);
			});
			map.fitBounds(markerBounds);
		}
	}, [data]);
	return useMarkerClustering ? /* @__PURE__ */ React.createElement(MarkerClusterGroup, { chunkedLoading: true }, markerComponents) : markerComponents;
};
//#endregion
export { MapContent };

//# sourceMappingURL=MapContent.mjs.map