import { useRef } from 'preact/hooks';
import { type MapViewParameters, useMap } from '../hooks/leaflet/useMap';
import { useMapClick } from '../hooks/leaflet/useMapClick';
import { useMarkersOnMap } from './hooks/useMarkersOnMap';
import type { Coordinates } from '../shared/types';
import type { Marker } from './types';

const defaultMapViewParameters: MapViewParameters = [[47.42111, 10.98528], 13];

const markerLayersStyle = {
    circleStyle: {
        color: 'black',
        radius: 10,
    },
};

type MapProps = {
    markers: Marker[];
    onMapClick: (coordinates: Coordinates) => void;
};

export const MapComponent = ({ markers, onMapClick }: MapProps) => {
    const mapContainerRef = useRef<HTMLDivElement>(null);
    const mapRef = useMap(mapContainerRef, defaultMapViewParameters);
    useMapClick(mapRef, onMapClick);
    useMarkersOnMap(mapRef, markers, markerLayersStyle);

    return <div ref={mapContainerRef} class="map-container" />;
};
