"use client";

import React, { useEffect, useState } from "react";
import { useAtom, useAtomValue } from "jotai";
import { activeBasemapAtom } from "../../state/active-basemap";
import { basemapConfig } from "../../config/basemap-config";

import { MapContainer } from "react-leaflet";
import L from "leaflet";
import { mapAtom } from "../../state/map";
import { mapSettingsAtom } from "../../state/map-settings";
import ZoomControl from "./zoom-control";
import { LayerManager } from "../layer-manager";
import MapSettings from "../map-settings";

const LeafletMap: React.FC = () => {
  const activeBasemap = useAtomValue(activeBasemapAtom);
  const [basemapLayer, setBasemapLayer] = useState<L.Layer | null>(null);
  const [map, setMap] = useAtom(mapAtom);
  const [mapSettings] = useAtom(mapSettingsAtom);

  useEffect(() => {
    if (!map) return;

    const currentConfig = basemapConfig[activeBasemap];
    if (!currentConfig?.leaflet) {
      console.error(
        `Missing Leaflet configuration for basemap: ${activeBasemap}`
      );
      return;
    }

    if (basemapLayer) {
      map.removeLayer(basemapLayer);
    }

    const newLayer = L.tileLayer(currentConfig.leaflet.url, {
      attribution: currentConfig.leaflet.attribution,
      maxZoom: currentConfig.leaflet.maxZoom,
    });

    setBasemapLayer(newLayer);
    map.addLayer(newLayer);
    newLayer.bringToBack();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [map, activeBasemap]);

  return (
    <>
      <MapContainer
        center={[mapSettings.center[0], mapSettings.center[1]]}
        zoom={8}
        zoomControl={false}
        ref={setMap}
        attributionControl={false}
        style={{ height: "100%", width: "100%" }}
      />
      <LayerManager map={map} />
      <div className="absolute top-48 cursor-pointer right-4 z-[403] flex flex-col gap-8">
        <MapSettings />
        <ZoomControl />
      </div>
    </>
  );
};

export default LeafletMap;