nodeMap/components/pois/poiUpdateModal/PoiUpdateModal.js

// @/components/pois/PoiUpdateModal.js
import React, { useState, useEffect } from "react";
import Select from "react-select";
import { useSelector, useDispatch } from "react-redux";
import { fetchLocationDevicesThunk } from "@/redux/thunks/database/fetchLocationDevicesThunk";
import { fetchPoiTypThunk } from "@/redux/thunks/database/pois/fetchPoiTypThunk";
import { selectMapLayersState } from "@/redux/slices/mapLayersSlice";
import { selectPoiTypData, selectPoiTypStatus } from "@/redux/slices/database/pois/poiTypSlice";
import { deletePoiThunk } from "@/redux/thunks/database/pois/deletePoiThunk";
import { updatePoiThunk } from "@/redux/thunks/database/pois/updatePoiThunk";
import { handleSubmit } from "@/components/pois/poiUpdateModal/utils/handlers";
import { selectCurrentPoi } from "@/redux/slices/database/pois/currentPoiSlice";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";

const PoiUpdateModal = ({ onClose, poiData }) => {
  const dispatch = useDispatch();

  const mapLayersVisibility = useSelector(selectMapLayersState);
  const poiTypData = useSelector(selectPoiTypData);
  const poiTypStatus = useSelector(selectPoiTypStatus);
  //const devices = useSelector(state => state.locationDevicesFromDB.devices);
  const { Points: availableDevices = [] } = useSelector(selectGisStationsStaticDistrict);

  const poi = useSelector(selectCurrentPoi);
  const selectedPoi = poi;
  console.log("Selected POI in PoiUpdateModal:", selectedPoi);

  //const poi = poiData || selectedPoi || {};

  const [poiId, setPoiId] = useState(poi?.idPoi || "");
  const [name, setName] = useState(poi?.name || "");
  const [description, setDescription] = useState(poi?.description || "");
  const [deviceName, setDeviceName] = useState(null);
  const [poiTypeId, setPoiTypeId] = useState(null);

  const systemNameToIdMap = {};

  const handleDeletePoi = async () => {
    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
      try {
        await dispatch(deletePoiThunk(poiId)).unwrap();
        onClose();
        window.location.reload();
      } catch (error) {
        console.error("Fehler beim Löschen des POI:", error);
        alert("Fehler beim Löschen des POI.");
      }
    }
  };

  useEffect(() => {
    dispatch(fetchLocationDevicesThunk());
    if (poiTypStatus === "idle") {
      dispatch(fetchPoiTypThunk());
    }
  }, [dispatch, poiTypStatus]);

  useEffect(() => {
    console.log("poiTypData in PoiUpdateModal:", poiTypData);
    if (poi && poiTypData.length > 0) {
      const selectedTyp = poiTypData.find(typ => Number(typ.idPoiTyp) === Number(poi.idPoiTyp));
      console.log("Selected Poi Type:", selectedTyp);
      if (selectedTyp) {
        setPoiTypeId({ value: selectedTyp.idPoiTyp, label: selectedTyp.name });
      }
    }
  }, [poi, poiTypData]);

  useEffect(() => {
    console.log("availableDevices in PoiUpdateModal:", availableDevices);
    if (poi && availableDevices.length > 0) {
      const selectedDevice = availableDevices.find(device => device.IdLD === poi.idLD);
      if (selectedDevice) {
        setDeviceName({ value: selectedDevice.IdLD, label: selectedDevice.LD_Name });
      }
    }
  }, [poi, availableDevices]);

  const filterDevices = () => {
    const activeSystems = Object.keys(mapLayersVisibility).filter(
      system => mapLayersVisibility[system]
    );
    const activeSystemIds = activeSystems
      .map(system => systemNameToIdMap[system])
      .filter(id => id !== undefined);
    return devices.filter(device => activeSystemIds.includes(device.idsystem_typ));
  };

  const poiTypeOptions = Array.isArray(poiTypData)
    ? poiTypData.map(poiTyp => ({
        value: poiTyp.idPoiTyp,
        label: poiTyp.name,
      }))
    : [];

  const deviceOptions = availableDevices.map(device => ({
    value: device.IdLD,
    label: device.LD_Name,
  }));

  const customStyles = {
    control: provided => ({
      ...provided,
      width: "100%",
      minWidth: "300px",
      maxWidth: "100%",
    }),
    menu: provided => ({
      ...provided,
      width: "100%",
      minWidth: "300px",
    }),
  };

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
      onClick={onClose}
    >
      <div
        className="relative bg-white p-6 rounded-lg shadow-lg"
        onClick={e => e.stopPropagation()}
      >
        <button
          onClick={onClose}
          className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
          aria-label="Close"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
        <form
          onSubmit={event =>
            handleSubmit({
              event,
              dispatch,
              poiId,
              name,
              description,
              poiTypeId,
              deviceName,
              poi,
              onClose,
            })
          }
          className="m-0 p-2 w-full"
        >
          <div className="flex flex-col mb-4">
            <label htmlFor="description" className="block mb-2 font-bold text-sm text-gray-700">
              Bezeichnung:
            </label>
            <input
              type="text"
              id="description"
              name="description"
              value={description}
              onChange={e => setDescription(e.target.value)}
              placeholder="Bezeichnung eingeben..."
              className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
            />
          </div>

          <div className="flex flex-col mb-4">
            <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
              Gerät:
            </label>
            <Select
              id="deviceName"
              value={deviceName}
              onChange={setDeviceName}
              options={deviceOptions}
              placeholder="Gerät auswählen..."
              isClearable={true}
              styles={customStyles}
            />
          </div>

          <div className="flex flex-col mb-4">
            <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
              Typ:
            </label>
            <Select
              id="idPoiTyp"
              value={poiTypeId}
              onChange={setPoiTypeId}
              options={poiTypeOptions}
              placeholder="Typ auswählen..."
              isClearable={true}
              styles={customStyles}
            />
          </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>
      </div>
    </div>
  );
};

export default PoiUpdateModal;