// pages/index.js
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
const MapComponentWithNoSSR = dynamic(
  () => import("../components/MapComponent"),
  { ssr: false }
);

export default function Home() {
  const [mParam, setMParam] = useState([""]);
  const [uParam, setUParam] = useState([""]);

  const [locations, setLocations] = useState([]);
  const [formData, setFormData] = useState({
    name: "",
    longitude: "",
    latitude: "",
    type: "",
  });

  const loadData = async () => {
    const response = await fetch("/api/locations");
    const data = await response.json();
    setLocations(data);
  };

  useEffect(() => {
    // Funktion, um URL-Parameter zu holen
    function getURLParameter(name) {
      // Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings
      const params = new URLSearchParams(window.location.search);
      return params.get(name); // Holt den Wert des Parameternamens
    }

    // Hole die Parameter 'm' und 'u'
    setMParam(getURLParameter("m"));
    setUParam(getURLParameter("u"));

    // Logge die Werte in der Konsole
    console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`);
    loadData();
  }, []);
  const handleAddLocation = async (name, type, lat, lng) => {
    const response = await fetch("/api/addLocation", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name,
        type,
        latitude: lat,
        longitude: lng,
      }),
    });

    if (response.ok) {
      console.log("Standort erfolgreich hinzugefügt");
      setFormData({ name: "", longitude: "", latitude: "", type: "" }); // Formular zurücksetzen
      loadData(); // Daten erneut laden
    } else {
      console.error("Fehler beim Hinzufügen des Standorts");
    }
  };
  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch("/api/addLocation", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
    });

    if (response.ok) {
      console.log("Erfolg");
      setFormData({ name: "", longitude: "", latitude: "", type: "" }); // Formular zurücksetzen
      loadData(); // Daten erneut laden
    } else {
      console.error("Fehler beim Speichern der Daten");
    }
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };
  const handleLocationUpdate = (id, newLatitude, newLongitude) => {
    setLocations((prevLocations) => {
      return prevLocations.map((location) => {
        if (location.idPoi === id) {
          return {
            ...location,
            // Hier musst du ggf. die Formatierung anpassen, je nachdem wie du die Koordinaten speicherst
            position: `POINT(${newLongitude} ${newLatitude})`,
          };
        }
        return location;
      });
    });
  };
  return (
    <div>
      {/* Ihr Formular */}
      <MapComponentWithNoSSR
        locations={locations}
        onAddLocation={handleAddLocation}
        onLocationUpdate={handleLocationUpdate}
      />
    </div>
  );
}