import { useRef } from "react";
import { Marker, useMapEvents } from "react-leaflet";

const prefix = process.env.NODE_ENV === "production" ? "/v3" : "";

const locationMarker = L.icon({
    iconUrl: prefix + "/images/locationMarker.png",
    iconSize: [50, 50],
    iconAnchor: [25, 50],
});

const MarkerLocation = ({ setValue }) => {
    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={map.getCenter()} key="location" />
    )
}
export default MarkerLocation