// /components/PoiUpdateModal.js
import React, { useState, useEffect } from "react";


import { fetchLocationDevicesFromDB } from "../redux/slices/db/locationDevicesFromDBSlice";
import { useDispatch, useSelector } from "react-redux";
import { selectCurrentPoi } from "../redux/slices/currentPoiSlice";

const PoiUpdateModal = ({ onClose, poiData }) => {
  const dispatch = useDispatch();
  const devices = useSelector((state) => state.locationDevicesFromDB.devices);

 const currentPoi = useSelector(selectCurrentPoi);
 const selectedPoi = useSelector((state) => state.selectedPoi);
  const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
  const [name, setName] = useState(poiData ? poiData.name : "");
  const [poiTypData, setPoiTypData] = useState([]);
  const [poiTypeId, setPoiTypeId] = useState("");
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [deviceName, setDeviceName] = useState("");
  const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
  const [idLocationDevice, setIdLocationDevice] = useState("");

  const [description, setDescription] = useState(poiData ? poiData.description : "");

  useEffect(() => {
    dispatch(fetchLocationDevicesFromDB());
  }, [dispatch]);

  // Log the initial POI data
  useEffect(() => {
    if (poiData) {
      setPoiId(poiData.idPoi);
      setName(poiData.name);
      setPoiTypeId(poiData.idPoiTyp);
      setIdLD(poiData.idLD);

      setDescription(poiData.description);
      setDeviceName(poiData.idLD);
      console.log("Loaded POI Data for editing:", poiData);
      console.log("POI ID:", poiData.idPoi);
      console.log("POI Name:", poiData.name);
      console.log("POI Typ ID:", poiData.idPoiTyp);
      console.log("POI Beschreibung:", poiData.description);
      console.log("POI Geräte-ID:", poiData.idLD);
    }
  }, [poiData]);

  /*   const fetchDeviceNameById = async (idLD) => {
    try {
      const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
      const data = await response.json();
      setDeviceName(data.deviceName);
    } catch (error) {
      console.error("Error fetching device name:", error);
    }
  }; */

  /*     const fetchDeviceNameById = async (idLD) => {
    try {
      const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`);
      const data = await response.json();
      setDeviceName(data.deviceName);
    } catch (error) {
      console.error("Error fetching device name:", error);
    }
  }; */

  // Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
  useEffect(() => {
    const fetchDeviceId = async () => {
      if (poiData && poiData.idLD) {
        try {
          const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
          const data = await response.json();
          if (data) setDeviceName(data.name);
        } catch (error) {
          console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
        }
      }
    };

    fetchDeviceId();
  }, [poiData]);

  // Function to handle deleting a POI
  const handleDeletePoi = async () => {
    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
      try {
        const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
          method: "DELETE",
        });
        if (response.ok) {
          alert("POI wurde erfolgreich gelöscht.");
          onClose(); // Close the modal
          //Browser neu laden, um die aktualisierte Liste anzuzeigen
          window.location.reload();
        } else {
          throw new Error("Fehler beim Löschen des POI.");
        }
      } catch (error) {
        console.error("Fehler beim Löschen des POI 1:", error);
        alert("Fehler beim Löschen des POI.");
      }
    }
  };

  // Fetch POI types
  useEffect(() => {
    const fetchPoiTypData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
        const data = await response.json();
        setPoiTypData(data);
        if (selectedPoi && data) {
          const matchingType = data.find((pt) => pt.name === selectedPoi.typ);
          if (matchingType) {
            setPoiTypeId(matchingType.idPoiTyp);
          }
        }
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
      }
    };
    fetchPoiTypData();
  }, [selectedPoi]);

  //--------------------------------------------------------------------------------------------
  // Fetch device name basierend auf der Geräte-ID

  useEffect(() => {
    console.log("currentPoi von PoiUpdateModal.js : ", currentPoi.idLD);
    const API_BASE_URL = `${window.location.origin}:3000`;
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/locationDevice/locationDevices`);

      .then((response) => response.json())
      .then((data) => {
        setLocationDeviceData(data);
        console.log("Standort- und Gerätedaten 3:", data);
        console.log("Standort- und Gerätedaten 3 poiData:", poiData);
        // Findet das Gerät, das der aktuellen IDLD entspricht
        const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
        if (currentDevice) {
          setDeviceName(currentDevice.name);
        }
      })
      .catch((error) => {
        console.error("Fehler beim Abrufen der Gerätedaten:", error);
        setLocationDeviceData([]);
      });
  }, [poiData?.idLD, currentPoi]);

  //--------------------------------------------------------------------------------------------
  // Angenommen, deviceName enthält die Geräte-ID
  //const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name

  const handleSubmit = async (event) => {
    event.preventDefault();
    const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
    const idLDData = await idLDResponse.json();
    const idLD = idLDData.idLD;
    try {
      const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          idPoi: poiId,
          name: name,
          description: description,
          idPoiTyp: poiTypeId,
          idLD: idLD,
          //idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl
        }),
      });

      if (response.ok) {
        onClose();
        window.location.reload();
      } else {
        const errorResponse = await response.json();
        throw new Error(errorResponse.error || "Fehler beim Aktualisieren des POI.");
      }
    } catch (error) {
      console.error("Fehler beim Aktualisieren des POI:", error);
      alert("Fehler beim Aktualisieren des POI.");
    }
  };

  //ausgewählte poi Informationen in Console anzeigen
  console.log("Selected POI:", selectedPoi);
  console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id);
  console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ); //als Typ in dropdown menu
  console.log("Selected POI Beschreibung in poiUpdateModal.js:", selectedPoi.description);
  console.log("Selected POI Gerät deviceId in poiUpdateModal.js:", selectedPoi.deviceId);

  return (
    <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
      <div className="flex items-center mb-4">
        <label htmlFor="description" className="block mr-2 flex-none">
          Beschreibung:
        </label>
        <input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung 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="deviceName" className="block mr-2 flex-none">
          Gerät:
        </label>
        <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
          {locationDeviceData.map(
            (device, index) => (
              console.log("device.id und name:", device),
              (
                <option key={index} value={device.id}>
                  {device.name}
                </option>
              )
            )
          )}
        </select>
      </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">
          {poiTypData.map((poiTyp, index) => (
            <option key={index} value={poiTyp.idPoiTyp}>
              {poiTyp.name}
            </option>
          ))}
        </select>
      </div>

      <button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
        POI löschen
      </button>

      <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
        POI aktualisieren
      </button>
    </form>
  );
};

export default PoiUpdateModal;