// components/ShowAddStationPopup.js
import React, { useState, useEffect, use } from "react";
import ReactDOM from "react-dom";
import { useRecoilValue ,useRecoilState, useSetRecoilState } from "recoil";
import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom';

const ShowAddStationPopup = ({ map, latlng }) => {
 
  const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden
  const [name, setName] = useState("");
  const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
  const [latitude] = useState(latlng.lat.toFixed(5));
  const [longitude] = useState(latlng.lng.toFixed(5));
  const setLoadData = useSetRecoilState(readPoiMarkersStore);
  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);


/*   useEffect(() => {
    if (map && loadData) {
      
      console.log("Map and loadData are defined in ShowAddStationPopup.js", map);
      console.log("loadData object in ShowAddStationPopup.js:", loadData);
      // Your code here
    }else{
      console.log("Map and loadData are not defined in ShowAddStationPopup.js");
    }
  }, [map, loadData]); */

// In Kontextmenü-Formular Typen anzeigen
  useEffect(() => {
    const fetchPoiTypData2 = async () => {
      try {
        const response = await fetch("/api/readPoiTyp");
        const data = await response.json();
        setPoiTypData2(data);
        if (data && data.length > 0) {
          setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
          console.log(
            "Initial poiTypeId set in ShowAddStationPopup.js :",
            data[0].idPoiTyp
          );
        }
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
      }
    };

    fetchPoiTypData2();
  }, []);

//-----------------handleSubmit-------------------
const handleSubmit = async (event) => {
  event.preventDefault();
  const formData = {
      name,
      poiTypeId,
      latitude,
      longitude,
  };

  const response = await fetch("/api/addLocation", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
  });

  if (response.ok) {
      setTrigger((trigger) => {
          console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
          const newTrigger = trigger + 1;
          console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
          return newTrigger;
      });
  } else {
      console.error("Fehler beim Hinzufügen des POI");
  }

  if (map && typeof map.closePopup === "function") {
      map.closePopup();
  }
};


  

  return (
    <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
      <div className="flex items-center mb-4">
        <label htmlFor="name" className="block mr-2 flex-none">
          Name:
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Name der Station"
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
        />
      </div>
      <div className="flex items-center mb-4">
        <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
          Typ:
        </label>
        <select
          id="idPoiTyp2"
          name="idPoiTyp2"
          value={poiTypeId}
          onChange={(e) => setPoiTypeId(e.target.value)}
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
        >
          {poiTypData2 &&
            poiTypData2.map((poiTyp, index) => (
              <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
                {poiTyp.name}
              </option>
            ))}
        </select>
      </div>
      <div className="flex items-center mb-4">
        <label htmlFor="lat" className="block mr-2 flex-none">
          Breitengrad:
        </label>
        <input
          type="text"
          id="lat"
          name="lat"
          value={latitude}
          readOnly
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
        />
      </div>
      <div className="flex items-center mb-4">
        <label htmlFor="lng" className="block mr-2 flex-none">
          Längengrad:
        </label>
        <input
          type="text"
          id="lng"
          name="lng"
          value={longitude}
          readOnly
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
        />
      </div>
      <button
        type="submit"
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
      >
        Station hinzufügen
      </button>
    </form>
  );
};

export default ShowAddStationPopup;