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