CPLv4.0/components/main/einausgaenge/modals/InputModal.tsx

"use client";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store";
import { useAppDispatch } from "../../../../redux/store";
import { updateInvertierung } from "../../../../redux/slices/digitalInputsSlice";

export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
  const dispatch = useAppDispatch();
  const reduxInput = useSelector((state: RootState) =>
    state.digitalInputsSlice.inputs.find(
      (input) => input.id === Number(selectedInput.id)
    )
  );

  const [invertiert, setInvertiert] = useState<boolean>(false);
  const isDev = process.env.NODE_ENV === "development";

  useEffect(() => {
    if (selectedInput) {
      if (isDev) {
        const saved = localStorage.getItem(`invertierung_${selectedInput.id}`);
        if (saved !== null) {
          setInvertiert(parseInt(saved) === 1);
        } else {
          setInvertiert(selectedInput.invertierung);
        }
      } else {
        setInvertiert(selectedInput.invertierung);
      }
    }
  }, [selectedInput, isDev]);

  if (!isOpen || !selectedInput) return null;

  const handleInvertierungToggle = async () => {
    const neueInvertierung = !invertiert;

    if (process.env.NODE_ENV === "development") {
      dispatch(
        updateInvertierung({
          id: Number(selectedInput.id),
          invertierung: neueInvertierung,
        })
      );

      setInvertiert(neueInvertierung);
    } else {
      const url = `/CPL?/CPL/SERVICE/empty.acp&DEI${selectedInput.id}=${
        neueInvertierung ? 1 : 0
      }`;
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error("Fehler beim Senden der Anfrage");

        dispatch(
          updateInvertierung({
            id: Number(selectedInput.id),
            invertierung: neueInvertierung,
          })
        );
        setInvertiert(neueInvertierung);
      } catch (error) {
        console.error("Invertierung fehlgeschlagen:", error);
        alert("Invertierung konnte nicht geändert werden.");
      }
    }
  };
  //---------------------------------

  useEffect(() => {
    if (reduxInput) {
      setInvertiert(reduxInput.invertierung);
    }
  }, [reduxInput]);

  //---------------------------------
  return (
    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
      <div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
        <h2 className="text-xl font-semibold text-littwin-blue mb-4 border-b pb-2">
          Details für Eingang {selectedInput.id}
        </h2>
        <div className="grid grid-cols-2 gap-x-4 gap-y-2">
          <div>
            <strong>Status:</strong>
          </div>
          <div>
            <strong>Status:</strong>
          </div>
          <div
            className={reduxInput?.status ? "text-red-600" : "text-green-600"}
          >
            {reduxInput?.status ? "Inaktiv" : "Aktiv"}
          </div>

          <div>
            <strong>Beschreibung:</strong>
          </div>
          <div>{selectedInput.description}</div>

          <div>
            <strong>Name:</strong>
          </div>
          <div>{selectedInput.name}</div>

          <div className="flex items-center gap-2 col-span-2">
            <strong>Invertierung:</strong>
            <span>{invertiert ? "Ein" : "Aus"}</span>
            <button
              onClick={handleInvertierungToggle}
              className="ml-auto px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
            >
              Umschalten
            </button>
          </div>

          <div>
            <strong>Filterzeit:</strong>
          </div>
          <div>{selectedInput.filterzeit} ms</div>

          <div>
            <strong>Gewichtung:</strong>
          </div>
          <div>{selectedInput.gewichtung}</div>

          <div>
            <strong>Zählerstand:</strong>
          </div>
          <div>{selectedInput.zaehlerstand}</div>

          <div>
            <strong>Zähler aktiv:</strong>
          </div>
          <div>{selectedInput.zaehlerAktiv ? "Ja" : "Nein"}</div>

          <div>
            <strong>Eingang offline:</strong>
          </div>
          <div>{selectedInput.eingangOffline ? "Offline" : "Online"}</div>
        </div>

        <button
          onClick={closeInputModal}
          className="mt-6 px-4 py-2 bg-littwin-blue hover:bg-blue-600 text-white rounded-lg transition"
        >
          Schließen
        </button>
      </div>
    </div>
  );
}