"use client";
import { MapContainer, TileLayer, useMap } from "react-leaflet";

export const IRAN_CENTER = L.latLng(32.4279, 53.6880);

const MapOptions = ({ options }) => {
    const map = useMap();
    if (!options) return;

    if (options.mapDrag) {
        map.dragging.enable();
        map.scrollWheelZoom.enable();
        map.touchZoom.enable();
        map.doubleClickZoom.enable();
    } else {
        map.dragging.disable();
        map.scrollWheelZoom.disable();
        map.touchZoom.disable();
        map.doubleClickZoom.disable();
    }
};

function MapLayer({ children, style, otherLayers, options }) {
    return (
        <>
            <MapContainer
                style={{ width: "100%", height: "100%", ...style }}
                center={IRAN_CENTER}
                zoom={6}
                zoomControl={false}
                attributionControl={false}
                {...options}
            >
                <MapOptions options={options} />
                <TileLayer url={`${process.env.NEXT_PUBLIC_MAPTILE_ENDPOINT}/{z}/{x}/{y}.png`} />
                {children}
            </MapContainer>
            {otherLayers}
        </>
    );
}

export default MapLayer;