"use client";
import React, { useMemo, useCallback } from "react";
import { LatLng, LatLngExpression, DragEndEvent, LeafletEventHandlerFnMap, icon as Icon } from "leaflet";
import { Marker } from "react-leaflet";

const pickerIcon = Icon({
    iconUrl: "/images/map_markers/kbh_red.png",
    iconSize: [25, 37],
    iconAnchor: [12, 37]
});

type DraggableMarkerProps = {
    position: LatLngExpression;
    onDragEnd?: (coords: LatLng) => void;
};

export const MapMarker: React.FC<DraggableMarkerProps> = (props) => {
    const {
        position,
        onDragEnd
    } = props;

    const handleDragEnd = useCallback((e: DragEndEvent) => {
        if(!onDragEnd) {
            return;
        }

        const coords = e.target.getLatLng();

        if(!coords) {
            return;
        }

        onDragEnd(coords);
    }, [onDragEnd]);

    const eventHandlers = useMemo((): LeafletEventHandlerFnMap => {
        return {
            dragend: handleDragEnd
        };
    }, [handleDragEnd]);

    return (
        <Marker
          draggable={!!onDragEnd}
          icon={pickerIcon}
          position={position}
          eventHandlers={eventHandlers} />
    );
};