import { useRef } from "react";
import { Marker, useMapEvents } from "react-leaflet";
import LocationMarker from "@/assets/images/locationMarker.png";

const locationMarker = L.icon({
    iconUrl: LocationMarker.src,
    iconSize: [50, 50],
    iconAnchor: [25, 50],
});

const MarkerLocation = ({ setValue, defaultLatLon }) => {
    const location = useRef();
    const map = useMapEvents({
        move: (e) => {
            const latlon = e.target.getCenter();
            location.current?.setLatLng(latlon);
            setValue("lat", latlon.lat);
            setValue("lon", latlon.lng);
        },
        zoom: (e) => {
            const latlon = e.target.getCenter();
            location.current?.setLatLng(latlon);
            setValue("lat", latlon.lat);
            setValue("lon", latlon.lng);
        },
    });

    return (
        <Marker
            ref={location}
            icon={locationMarker}
            position={defaultLatLon ? L.LatLng(defaultLatLon.lat, defaultLatLon.lon) : map.getCenter()}
            key="location"
        />
    );
};
export default MarkerLocation;
