import React, { useContext } from 'react';
import { MapContainer, GeoJSON, useMapEvents, TileLayer, Tooltip, Marker } from 'react-leaflet';
import { useTheme, LinearProgress } from '@mui/material';
import { DivIcon, type LeafletMouseEvent } from 'leaflet';
import { type PublicOrder } from '../../models';
import OrderTooltip from '../Charts/helpers/OrderTooltip';
import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
interface MapPinProps {
fillColor: string;
outlineColor: string;
eyesColor: string;
}
const MapPin = ({ fillColor, outlineColor, eyesColor }: MapPinProps): string => {
return ``;
};
interface Props {
orderType?: number;
useTiles: boolean;
position?: [number, number] | undefined;
setPosition?: (position: [number, number]) => void;
orders?: PublicOrder[];
onOrderClicked?: (id: number, shortAlias: string) => void;
zoom?: number;
center?: [number, number];
interactive?: boolean;
}
const Map = ({
orderType,
position,
zoom,
orders = [],
setPosition = () => {},
useTiles = false,
onOrderClicked = () => null,
center = [0, 0],
interactive = false,
}: Props): JSX.Element => {
const theme = useTheme();
const { worldmap } = useContext(AppContext);
const RobotMarker = (
key: string | number,
position: [number, number],
orderType: number,
order?: PublicOrder,
): JSX.Element => {
const fillColor = orderType === 1 ? theme.palette.primary.main : theme.palette.secondary.main;
const outlineColor = 'black';
const eyesColor = 'white';
return (
{
order?.id != null && onOrderClicked(order.id, order.coordinatorShortAlias);
},
}}
>
{order != null && (
)}
);
};
const LocationMarker = (): JSX.Element => {
useMapEvents({
click(event: LeafletMouseEvent) {
if (interactive) {
setPosition([event.latlng.lat, event.latlng.lng]);
}
},
});
return position != null ? RobotMarker('marker', position, orderType ?? 0) : <>;
};
const getOrderMarkers = (): JSX.Element => {
if (orders.length < 1) return <>;
return (
{orders.map((order) => {
if (!(order?.latitude != null) || !(order?.longitude != null)) return <>;
return RobotMarker(order.id, [order.latitude, order.longitude], order.type ?? 0, order);
})}
);
};
return (
{!useTiles && worldmap == null && }
{!useTiles && worldmap != null && (
)}
{useTiles && (
)}
{getOrderMarkers()}
);
};
export default Map;