import {useMap, useMapEvents} from "react-leaflet";
import {useEffect} from "react";

/**
 * Helper component for console logging where on a map the user clicked for debugging purposes.
 *
 * This component renders nothing and is intended to be mounted inside a <MapContainer>
 */
export function MapClickLogger() {

    const map = useMap();
    useMapEvents({
        click(e) {
            console.log("lat:", e.latlng.lat, "lng:", e.latlng.lng);
        },
    });

    return null;
}

/**
 * Helper component that detects when a zoom change as completed and sets the callback to the updated zoom level
 *
 * This component renders nothing and is intended to be mounted inside a <MapContainer>
 *
 * @param onZoom Callback set to the current zoom level on zoomend
 */
export function ZoomWatcher({onZoom}){
    const map = useMap();
    useMapEvents({
        zoomend(e){
            onZoom(map.getZoom());

        }
    })
    return null;
}

/**
 * Helper component that take triggers a flyTo animation when a position is present
 *
 * This component returns nothing and is intended to be mounted inside a <MapConatiner>
 *
 * @param position Array of two integers representing the desired coordinates to flyTo
 * @param zoom Integer representing the desired zoom level to display

 */
export function FlyTo({ position, zoom }) {
    const map = useMap();

    useEffect(() => {
        if (!position) return;
        map.flyTo(position, zoom, { animate: true });
    }, [position, zoom, map]);

    return null;
}