import React, { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { useRecoilState, useRecoilValue } from "recoil";
import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStoreSlice.js";
import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";

const MapComponentWithNoSSR = dynamic(() => import("../components/MapComponent"), { ssr: false });
// TestScript ohne SSR
const TestScriptWithNoSSR = dynamic(() => import("../components/TestScript"), { ssr: false });

export default function Home() {
  const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
  const [locations, setLocations] = useRecoilState(readPoiMarkersStore);
  const [mParam, setMParam] = useState("");
  const [uParam, setUParam] = useState("");

  const loadData = async () => {
    try {
      const response = await fetch("/api/talas_v5_DB/pois/readLocations");
      if (!response.ok) {
        throw new Error("Fehler beim Laden der Standortdaten");
      }
      const data = await response.json();
      setLocations(data);
    } catch (error) {
      console.error(error.message);
    }
  };

  useEffect(() => {
    function getURLParameter(name) {
      const params = new URLSearchParams(window.location.search);
      return params.get(name);
    }
    setMParam(getURLParameter("m"));
    setUParam(getURLParameter("u"));

    loadData();
  }, [poiReadTrigger]);

  const handleAddLocation = async (name, type, lat, lng) => {
    try {
      const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, type, latitude: lat, longitude: lng }),
      });
      if (!response.ok) {
        throw new Error("Fehler beim Hinzufügen des Standorts");
      }
      //console.log("Standort erfolgreich hinzugefügt");
      loadData();
    } catch (error) {
      console.error(error.message);
    }
  };

  const handleLocationUpdate = (id, newLatitude, newLongitude) => {
    setLocations((prevLocations) => prevLocations.map((location) => (location.idPoi === id ? { ...location, position: `POINT(${newLongitude} ${newLatitude})` } : location)));
  };

  useEffect(() => {
    loadData();
  }, [poiReadTrigger]);

  return (
    <div>
      <MapComponentWithNoSSR locations={locations} onAddLocation={handleAddLocation} onLocationUpdate={handleLocationUpdate} />
      <TestScriptWithNoSSR />
    </div>
  );
}