//components/Kartenkomponente.js
import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import dynamic from 'next/dynamic';

// Dynamischer Import mit SSR deaktiviert
const KartenKomponenteOhneSSR = dynamic(
  () => import('../components/KartenKomponente'),
  { ssr: false }
);


const KartenKomponente = ({ locations, onAddLocation, onLocationUpdate }) => {
  const [isOnline, setIsOnline] = useState(true); // Standardwert als fallback
  const [aktuelleSchicht, setAktuelleSchicht] = useState({
    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", // Standardwert
    options: {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      minZoom: 7,
      maxZoom: 19,
      crossOrigin: true,
    },
  });

  useEffect(() => {
    // Setzt den Zustand, basierend darauf, ob das Fensterobjekt existiert (Client-Seite)
    if (typeof window !== "undefined") {
      setIsOnline(navigator.onLine);
      setAktuelleSchicht({
        url: navigator.onLine ? "https://tile.openstreetmap.org/{z}/{x}/{y}.png" : "/mapTiles/{z}/{x}/{y}.png",
        options: {
          minZoom: 7,
          maxZoom: navigator.onLine ? 19 : 14,
          crossOrigin: true,
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        },
      });

      const handleOnlineStatus = () => setIsOnline(navigator.onLine);
      window.addEventListener("online", handleOnlineStatus);
      window.addEventListener("offline", handleOnlineStatus);

      return () => {
        window.removeEventListener("online", handleOnlineStatus);
        window.removeEventListener("offline", handleOnlineStatus);
      };
    }
  }, []);

  useEffect(() => {
    setAktuelleSchicht({
      url: isOnline ? "https://tile.openstreetmap.org/{z}/{x}/{y}.png" : "/mapTiles/{z}/{x}/{y}.png",
      options: {
        minZoom: 7,
        maxZoom: isOnline ? 19 : 14,
        crossOrigin: true,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      },
    });
  }, [isOnline]);

  // Funktion, um auf Klick ein Popup für das Hinzufügen neuer Standorte zu zeigen
  const addMarker = (e) => {
    // Hier könnte eine Logik stehen, um ein Formular-Modal oder Popup zu öffnen, um die Daten für den neuen Standort zu sammeln
    const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng }; // Beispiel für neue Standortdaten
    onAddLocation(newLocation); // Rufe die übergebene onAddLocation-Funktion mit den neuen Standortdaten auf
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: "100vh", width: "100%" }} whenCreated={map => map.on('click', addMarker)}>
      <TileLayer url={aktuelleSchicht.url} {...aktuelleSchicht.options} />
      {locations.map((location, index) => (
        <Marker
          key={index}
          position={[location.lat, location.lng]}
          draggable={true}
          eventHandlers={{
            dragend: (e) => {
              const newLat = e.target.getLatLng().lat;
              const newLng = e.target.getLatLng().lng;
              onLocationUpdate(location.id, newLat, newLng); // Aktualisiere die Position des Standorts, nachdem der Marker verschoben wurde
            },
          }}
        >
          <Popup>{location.name}</Popup>
        </Marker>
      ))}
    </MapContainer>
  );
};

export default KartenKomponente;