// components/MapComponent.js
import {
  React,
  useEffect,
  useRef,
  useState,
  L,
  config,
  urls,
  OverlappingMarkerSpiderfier,
  DataSheet,
  useRecoilState,
  useRecoilValue,
  useSetRecoilState,
  gisStationsStaticDistrictState,
  gisSystemStaticState,
  mapLayersState,
  selectedAreaState,
  zoomTriggerState,
  AddPoiModalWindow,
  poiReadFromDbTriggerAtom,
  InformationCircleIcon,
  PoiUpdateModal,
  selectedPoiState,
  currentPoiState,
  ToastContainer,
  toast,
  mapIdState,
  userIdState,
  poiLayerVisibleState,
  plusRoundIcon,
  createAndSetMarkers,
  restoreMapSettings,
  checkOverlappingMarkers,
  fetchGisStatusStations,
  fetchPoiData,
  fetchUserRights,
  MAP_VERSION,
  layers,
  initializeMap,
  addItemsToMapContextMenu,
  useGmaMarkersLayer,
  useTalasMarkersLayer,
  useEciMarkersLayer,
  useGsmModemMarkersLayer,
  useCiscoRouterMarkersLayer,
  useWagoMarkersLayer,
  useSiemensMarkersLayer,
  useOtdrMarkersLayer,
  useWdmMarkersLayer,
  useMessstellenMarkersLayer,
  useTalasiclMarkersLayer,
  useDauzMarkersLayer,
  useSmsfunkmodemMarkersLayer,
  useUlafMarkersLayer,
  useSonstigeMarkersLayer,
  fetchGisStationsStaticDistrict,
  fetchGisStationsStatusDistrict,
  fetchGisStationsMeasurements,
  fetchGisSystemStatic,
  setupPolylines,
  setupMarkers,
  VersionInfoModal,
  useFetchPoiData,
  usePoiTypData,
  useLayerVisibility,
  useLineData,
} from "./imports.js";
import { useMapComponentState } from "../hooks/useMapComponentState";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  const { deviceName, setDeviceName } = useMapComponentState();
  const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
  //const [deviceName, setDeviceName] = useState("");
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [priorityConfig, setPriorityConfig] = useState([]);
  const [menuItemAdded, setMenuItemAdded] = useState(false);
  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
  const [isRightsLoaded, setIsRightsLoaded] = useState(false);
  const [hasRights, setHasRights] = useState(false);
  const [mapId, setMapId] = useRecoilState(mapIdState);
  const [userId, setUserId] = useRecoilState(userIdState);
  const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
  const [userRights, setUserRights] = useState(null);
  const setSelectedPoi = useSetRecoilState(selectedPoiState);
  const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
  const [currentPoiData, setCurrentPoiData] = useState(null);
  const setCurrentPoi = useSetRecoilState(currentPoiState);
  const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
  const zoomTrigger = useRecoilValue(zoomTriggerState);
  const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
  const [poiTypMap, setPoiTypMap] = useState(new Map());
  const [showPopup, setShowPopup] = useState(false);
  const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
  const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
  const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
  const [map, setMap] = useState(null); // Zustand der Karteninstanz
  const [oms, setOms] = useState(null); // State für OMS-Instanz
  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState);
  const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState([]); // Zustand für Statusdaten
  const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
  const [GisSystemStatic, setGisSystemStatic] = useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
  // Konstanten für die URLs
  const mapGisStationsStaticDistrictUrl = config.mapGisStationsStaticDistrictUrl;
  const mapGisStationsStatusDistrictUrl = config.mapGisStationsStatusDistrictUrl;
  const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
  const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
  const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
  //console.log("priorityConfig in MapComponent1: ", priorityConfig);
  const talasMarkers = useTalasMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const eciMarkers = useEciMarkersLayer(map, eciMarkers, oms, layers.MAP_LAYERS.ECI);
  const gsmModemMarkers = useGsmModemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const ciscoRouterMarkers = useCiscoRouterMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const wagoMarkers = useWagoMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
  const siemensMarkers = useSiemensMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
  const otdrMarkers = useOtdrMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const wdmMarkers = useWdmMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const messstellenMarkers = useMessstellenMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const talasiclMarkers = useTalasiclMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
  const dauzMarkers = useDauzMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const smsfunkmodemMarkers = useSmsfunkmodemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const ulafMarkers = useUlafMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
  const sonstigeMarkers = useSonstigeMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
  const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
  const [lineStatusData, setLineStatusData] = useState([]);
  const [linesData, setLinesData] = useState([]);
  const mapLayersVisibility = useRecoilValue(mapLayersState);
  const selectedArea = useRecoilValue(selectedAreaState);
  const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
  const [linePositions, setLinePositions] = useState([]);
  const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
  const [polylines, setPolylines] = useState([]);
  const [markers, setMarkers] = useState([]);
  const closePopup = () => setShowPopup(false);
  const [newPoint, setNewPoint] = useState(null);
  const [newCoords, setNewCoords] = useState(null);
  const [tempMarker, setTempMarker] = useState(null);

  const [popupCoordinates, setPopupCoordinates] = useState({
    lat: 52.52,
    lng: 13.405,
  });

  const handleAddStation = (stationData) => {
    setAddPoiModalWindowState(false);
    closePopup(); // Schließt das Popup nach dem Hinzufügen
  };

  const openVersionInfoModal = () => {
    setShowVersionInfoModal(true);
  };

  const closeVersionInfoModal = () => {
    setShowVersionInfoModal(false);
  };

  const [currentZoom, setCurrentZoom] = useState(() => {
    const storedZoom = localStorage.getItem("mapZoom");
    return storedZoom ? parseInt(storedZoom, 10) : 12;
  });

  const [currentCenter, setCurrentCenter] = useState(() => {
    const storedCenter = localStorage.getItem("mapCenter");
    try {
      return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625];
    } catch (e) {
      console.error("Error parsing stored map center:", e);
      return [53.111111, 8.4625];
    }
  });

  useEffect(() => {
    fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
  }, []);

  useEffect(() => {
    const params = new URL(window.location.href).searchParams;
    setMapId(params.get("m"));
    setUserId(params.get("u"));
  }, [setMapId, setUserId]);

  useEffect(() => {
    if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
      //console.log("Überprüfung der Berechtigung vor addItemsToMapContextMenu: ", hasRights);
      addItemsToMapContextMenu(hasRights);
    }
  }, [
    map,
    poiLayerRef,
    isPoiTypLoaded,
    menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
    hasRights, // Sicherstellen, dass hasRights berücksichtigt wird
    isRightsLoaded, // Überprüfung, ob die Rechte geladen sind
  ]);

  useEffect(() => {
    const fetchAndSetUserRights = async () => {
      const rights = await fetchUserRights();
      setUserRights(rights);
      setIsRightsLoaded(true);
      setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
    };

    fetchAndSetUserRights();
  }, []);

  useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        // Fetch GIS Stations Static District
        await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict);

        // Fetch GIS Stations Status District
        await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict);

        // Fetch GIS Stations Measurements
        await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements);

        // Fetch GIS System Static
        await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchAllData();
  }, []);
  //--------------------------------------------------------
  useEffect(() => {
    const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
    //const endpoint = "http://localhost/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=10";
    fetch(endpoint)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        const newLinePositions = data.map((item) => {
          //console.log("item.idLD", item.idLD);
          //console.log("item.idModul", item.idModul);

          if (item.points && Array.isArray(item.points)) {
            return {
              coordinates: item.points.map((point) => [point.x, point.y]),
              idModul: item.idModul,
              idLD: item.idLD,
            };
          } else {
            throw new Error("Points missing or not an array");
          }
        });
        setLinePositions(newLinePositions);
      })
      .catch((error) => {
        console.error("Error fetching data:", error.message);
      });
  }, []);
  //--------------------------------------------
  useEffect(() => {
    const fetchPoiTypData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
        const data = await response.json();
        const map = new Map();
        data.forEach((item) => map.set(item.idPoiTyp, item.name));
        setPoiTypMap(map);
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error);
      }
    };
    //--------------------------------------------
    const fetchPoiData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const data = await response.json();
      } catch (error) {
        console.error("Fehler beim Abrufen der poiData-2:", error);
      }
    };
    //--------------------------------------------

    fetchPoiTypData();
    fetchPoiData();
  }, []);

  useEffect(() => {
    if (map) {
      const dbLayer = new L.LayerGroup().addTo(map); // Define dbLayer here

      return () => {
        dbLayer.remove();
      };
    }
  }, [map]);

  useEffect(() => {
    if (map && !poiLayerRef.current) {
      poiLayerRef.current = new L.LayerGroup().addTo(map);
    }

    return () => {
      if (map && poiLayerRef.current) {
        map.removeLayer(poiLayerRef.current);
        poiLayerRef.current = new L.LayerGroup().addTo(map);
      }
      locations.forEach((location) => {});
    };
    //console.log("trigger in MapComponent.js:", poiReadTrigger);
  }, [map, locations, poiReadTrigger]);

  //--------------------------------------------
  useEffect(() => {
    if (poiData.length === 0) return;

    setupMarkers(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData);
  }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]);

  //---------------------------------------------
  //console.log("priorityConfig in MapComponent2: ", priorityConfig);
  useEffect(() => {
    if (gisSystemStaticLoaded && map) {
      createAndSetMarkers(1, GisSystemStatic, priorityConfig); // TALAS-System
      createAndSetMarkers(2, GisSystemStatic, priorityConfig); // ECI-System
      createAndSetMarkers(5, GisSystemStatic, priorityConfig); // GSM-Modem-System
      createAndSetMarkers(6, GisSystemStatic, priorityConfig); // Cisco-Router-System
      createAndSetMarkers(7, GisSystemStatic, priorityConfig); // WAGO-System
      createAndSetMarkers(8, GisSystemStatic, priorityConfig); // Siemens-System
      createAndSetMarkers(9, GisSystemStatic, priorityConfig); // OTDR-System
      createAndSetMarkers(10, GisSystemStatic, priorityConfig); // WDM-System
      createAndSetMarkers(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
      createAndSetMarkers(13, GisSystemStatic, priorityConfig); // Messstellen-System
      createAndSetMarkers(100, GisSystemStatic, priorityConfig); // TALASICL-System
      createAndSetMarkers(110, GisSystemStatic, priorityConfig); // DAUZ-System
      createAndSetMarkers(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
      createAndSetMarkers(200, GisSystemStatic, priorityConfig); // Sonstige-System
      createAndSetMarkers(0, GisSystemStatic, priorityConfig); // ULAF-System
    }
  }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);

  useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS");
  useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI");
  useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem");
  useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter");
  useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO");
  useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens");
  useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR");
  useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM");
  useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA");
  useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige");
  useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL");
  useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ");
  useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem");
  useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen");
  useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF");

  useEffect(() => {
    if (map) {
      var x = 51.41321407879154;
      var y = 7.739617925303934;
      var zoom = 7;

      if (map && map.flyTo) {
        map.flyTo([x, y], zoom);
      } else {
        console.error("Map object is not ready or does not have flyTo method");
      }
    }
  }, [map, zoomTrigger]);

  useEffect(() => {
    if (map) {
      const allMarkers = [
        ...talasMarkers,
        ...eciMarkers,
        ...gsmModemMarkers,
        ...ciscoRouterMarkers,
        ...wagoMarkers,
        ...siemensMarkers,
        ...otdrMarkers,
        ...wdmMarkers,
        ...gmaMarkers,
        ...messstellenMarkers,
        ...talasiclMarkers,
        ...dauzMarkers,
        ...smsfunkmodemMarkers,
        ...sonstigeMarkers,
        ...ulafMarkers,
      ];

      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
    }
  }, [map, talasMarkers, eciMarkers, gsmModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response1 = await fetch(webserviceGisLinesStatusUrl);
        const data1 = await response1.json();
        //console.log("data1.Statis", data1.Statis);
        const reversedData = data1.Statis.reverse();
        setLineStatusData(reversedData);

        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
        const data2 = await response2.json();

        const colorsByModule = {};
        reversedData.forEach((stat) => {
          const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul);
          if (matchingLine) {
            colorsByModule[matchingLine.idModul] = stat.PrioColor;
            //console.log("Übereinstimmung gefunden für: ", stat);
            setLinesData(matchingLine);
          }
        });
        //setLineColors(colorsByModule);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    fetchData();
  }, []);

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

    markers.forEach((marker) => marker.remove());
    polylines.forEach((polyline) => polyline.remove());

    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker);

    setMarkers(newMarkers);
    setPolylines(newPolylines);
  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]);

  useEffect(() => {
    if (map) {
      restoreMapSettings(map);
    }
  }, [map]);

  useEffect(() => {
    if (map) {
      const handleMapMoveEnd = (event) => {
        const newCenter = map.getCenter();
        const newZoom = map.getZoom();

        setCurrentCenter([newCenter.lat, newCenter.lng]);
        setCurrentZoom(newZoom);

        localStorage.setItem("mapCenter", JSON.stringify([newCenter.lat, newCenter.lng]));
        localStorage.setItem("mapZoom", newZoom);
      };

      map.on("moveend", handleMapMoveEnd);
      map.on("zoomend", handleMapMoveEnd);

      return () => {
        map.off("moveend", handleMapMoveEnd);
        map.off("zoomend", handleMapMoveEnd);
      };
    }
  }, [map]);

  useEffect(() => {
    if (selectedArea && map) {
      const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
      if (station) {
        map.flyTo([station.X, station.Y], 14);
      }
    }
  }, [selectedArea, map, GisStationsStaticDistrict]);

  useEffect(() => {
    if (zoomTrigger && map) {
      map.flyTo([51.41321407879154, 7.739617925303934], 7);
    }
  }, [zoomTrigger, map]);

  useEffect(() => {
    if (mapRef.current && !map) {
      initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights);
    }
  }, [mapRef, map, hasRights, addItemsToMapContextMenu]);

  useEffect(() => {
    if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
      addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
    }
  }, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]);
  //--------------------------------------------
  // rote Marker ganz oben wenn überlappen sind
  useEffect(() => {
    const fetchPriorityConfig = async () => {
      try {
        const res = await fetch("/api/talas_v5_DB/priorityConfig");
        if (!res.ok) {
          throw new Error(`HTTP error! status: ${res.status}`);
        }
        const data = await res.json();
        setPriorityConfig(data);
      } catch (error) {
        console.error("Failed to load priority configuration:", error);
      }
    };

    fetchPriorityConfig();
  }, []);
  //--------------------------------------------
  /*   useEffect(() => {
    if (!map) return;

    markers.forEach((marker) => marker.remove());
    polylines.forEach((polyline) => polyline.remove());

    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter);

    setMarkers(newMarkers);
    setPolylines(newPolylines);
  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, currentZoom, currentCenter]); // Ensure currentZoom and currentCenter are included in the dependency array */
  //--------------------------------------------

  return (
    <>
      <ToastContainer />
      <div>{showPoiUpdateModal && <PoiUpdateModal onClose={() => setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</div>

      <div>
        {showPopup && (
          <div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={closePopup}>
            <div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
              <button onClick={closePopup} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
              <AddPoiModalWindow onClose={closePopup} onSubmit={handleAddStation} latlng={popupCoordinates} />
            </div>
          </div>
        )}
      </div>

      <DataSheet className="z-50" />

      <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>

      <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
        <div className="flex justify-between items-center">
          <div>
            <span className="text-black text-lg font-semibold"> TALAS.Map </span>
            <br />
            <span className="text-black text-lg">Version {MAP_VERSION}</span>
          </div>
          <div>
            <button onClick={openVersionInfoModal}>
              <InformationCircleIcon className="text-blue-900 h-8 w-8 pr-1" title="Weitere Infos" />
            </button>
          </div>
        </div>
      </div>
      <VersionInfoModal showVersionInfoModal={showVersionInfoModal} closeVersionInfoModal={closeVersionInfoModal} MAP_VERSION={MAP_VERSION} />
    </>
  );
};

export default MapComponent;