import leaflet from 'leaflet';
import { type Ref, useMemo } from 'preact/hooks';
import { useLayers } from '../../../hooks/leaflet/useLayers';
import type { Marker } from '../../types';
import {
    type MarkerLayersStyle,
    getLayersForMarkers,
} from './getLayersForMarkers';

export const useMarkersOnMap = (
    mapRef: Readonly<Ref<leaflet.Map | undefined>>,
    markers: Marker[],
    markerLayersStyle: MarkerLayersStyle,
) => {
    const layers = useMemo(
        () => getLayersForMarkers(markers, markerLayersStyle),
        [markers, markerLayersStyle],
    );
    useLayers(mapRef, layers);
};
