import leaflet from 'leaflet';
import { toPairs } from '../../../shared/collections';
import type { Marker } from '../../types';

export type MarkerLayersStyle = {
    circleStyle: Pick<leaflet.CircleMarkerOptions, 'color' | 'radius'>;
};

export const getLayersForMarkers = (
    markers: Marker[],
    markerLayersStyle: MarkerLayersStyle,
) => [
    // lines
    ...toPairs(markers).map(([a, b]) =>
        leaflet.polyline([a.coordinates, b.coordinates]),
    ),
    // circles and labels
    ...markers.map((marker) =>
        leaflet
            .circleMarker(marker.coordinates, {
                ...markerLayersStyle.circleStyle,
                bubblingMouseEvents: false,
                fill: true,
                fillOpacity: 100,
            })
            .on('click', marker.remove)
            .bindTooltip(marker.shortLabel, {
                permanent: true,
                direction: 'center',
                className: 'text',
            }),
    ),
];
