CPLv4.0/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx

// KueEinstellung.tsx – final überarbeitet: formData wird direkt nach dem Speichern aktualisiert

"use client";

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import type { RootState } from "../../../../../redux/store";
import handleSave from "../handlers/handleSave";
import handleDisplayEinschalten from "../handlers/handleDisplayEinschalten";
import firmwareUpdate from "../handlers/firmwareUpdate";
import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";

interface Props {
  slot: number;
  showModal: boolean;
  onClose?: () => void;
  onModulNameChange?: (id: string) => void;
}

const memoryIntervalOptions = [
  { value: 0, label: "Kein" },
  { value: 1, label: "1 Minute" },
  { value: 5, label: "5 Minuten" },
  { value: 10, label: "10 Minuten" },
  { value: 15, label: "15 Minuten" },
  { value: 30, label: "30 Minuten" },
  { value: 60, label: "60 Minuten" },
  { value: 360, label: "6 Stunden" },
  { value: 720, label: "12 Stunden" },
];

export default function KueEinstellung({
  slot,
  showModal,
  onClose = () => {},
  onModulNameChange,
}: Props) {
  const dispatch = useDispatch();
  const {
    kueID,
    kueLimit1,
    kueDelay1,
    kueLimit2Low,
    kueLoopInterval,
    memoryInterval,
  } = useSelector((state: RootState) => state.kueDataSlice);

  const { isAdminLoggedIn } = useAdminAuth(true);

  const formCacheKey = `slot_${slot}`;
  if (typeof window !== "undefined") {
    window.__kueCache = window.__kueCache || {};
  }
  const cached =
    typeof window !== "undefined" ? window.__kueCache?.[formCacheKey] : null;

  const [formData, setFormData] = useState(() => {
    if (cached) return cached;
    return {
      name: kueID[slot] || "",
      limit1: kueLimit1[slot]?.toString() ?? "",
      delay1: kueDelay1[slot]?.toString() ?? "",
      limit2Low: kueLimit2Low[slot]?.toString() ?? "",
      loopInterval: kueLoopInterval[slot]?.toString() ?? "",
      memoryInterval: memoryInterval[slot]?.toString() ?? "",
    };
  });

  const handleChange = (key: keyof typeof formData, value: string) => {
    const updated = { ...formData, [key]: value };
    setFormData(updated);
    if (typeof window !== "undefined") {
      window.__kueCache![formCacheKey] = updated;
    }
  };

  const handleSaveWrapper = () => {
    const updatedKueID = [...kueID];
    updatedKueID[slot] = formData.name;

    const updatedLimit1 = [...kueLimit1];
    updatedLimit1[slot] = Number(formData.limit1);

    const updatedDelay1 = [...kueDelay1];
    updatedDelay1[slot] = Number(formData.delay1);

    const updatedLimit2Low = [...kueLimit2Low];
    updatedLimit2Low[slot] = Number(formData.limit2Low);

    const updatedLoopInterval = [...kueLoopInterval];
    updatedLoopInterval[slot] = Number(formData.loopInterval);

    const updatedMemoryInterval = [...memoryInterval];
    updatedMemoryInterval[slot] = Number(formData.memoryInterval);

    handleSave({
      ids: updatedKueID,
      isolationsgrenzwerte: updatedLimit1,
      verzoegerung: updatedDelay1,
      untereSchleifenGrenzwerte: updatedLimit2Low,
      obereSchleifenGrenzwerte: updatedLimit2Low,
      schleifenintervall: updatedLoopInterval,
      speicherintervall: updatedMemoryInterval,
      originalValues: {
        kueID,
        isolationsgrenzwerte: kueLimit1,
        verzoegerung: kueDelay1,
        untereSchleifenGrenzwerte: kueLimit2Low,
        obereSchleifenGrenzwerte: kueLimit2Low,
        schleifenintervall: kueLoopInterval,
        speicherintervall: memoryInterval,
      },
      slot,
      dispatch,
      onModulNameChange: onModulNameChange ?? (() => {}),
      onClose,
    });

    const newData = {
      name: updatedKueID[slot],
      limit1: updatedLimit1[slot].toString(),
      delay1: updatedDelay1[slot].toString(),
      limit2Low: updatedLimit2Low[slot].toString(),
      loopInterval: updatedLoopInterval[slot].toString(),
      memoryInterval: updatedMemoryInterval[slot].toString(),
    };

    setFormData(newData);

    if (typeof window !== "undefined") {
      window.__kueCache![formCacheKey] = newData;
    }
  };

  return (
    <div className="p-4 text-sm">
      {/* Kabelbezeichnung */}
      <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
        <label className="">Kabelbezeichnung:</label>
        <input
          type="text"
          className="w-full border rounded p-1"
          value={formData.name}
          onChange={(e) => handleChange("name", e.target.value)}
        />
      </div>
      {/* Speicherintervall */}
      <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
        <label className="">Speicherintervall:</label>
        <select
          className="w-full border rounded p-1"
          value={formData.memoryInterval}
          onChange={(e) => handleChange("memoryInterval", e.target.value)}
        >
          {memoryIntervalOptions.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>
      {/* Isolationsmessung */}
      <div className="mb-4  w-full">
        <h3 className="font-bold mb-2">Isolationsmessung</h3>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Grenzwert:</label>
          <div>
            <input
              type="number"
              className="w-24 border rounded p-1 mr-2 text-right"
              value={formData.limit1}
              onChange={(e) => handleChange("limit1", e.target.value)}
            />
            <span>MOhm</span>
          </div>
        </div>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Verzögerung:</label>
          <div>
            <input
              type="number"
              className="w-24 border rounded p-1 mr-2 text-right"
              value={formData.delay1}
              onChange={(e) => handleChange("delay1", e.target.value)}
            />
            <span>Sekunden</span>
          </div>
        </div>
      </div>
      {/* Schleifenmessung */}
      <div className="mb-4">
        <h3 className="font-bold mb-2">Schleifenmessung</h3>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Grenzwert:</label>
          <div>
            <input
              type="number"
              className="w-24 border rounded p-1 mr-2 text-right"
              value={formData.limit2Low}
              onChange={(e) => handleChange("limit2Low", e.target.value)}
            />
            <span>kOhm</span>
          </div>
        </div>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Schleifenmessintervall:</label>
          <div>
            <input
              type="number"
              className="w-24 border rounded p-1 mr-2 text-right"
              value={formData.loopInterval}
              onChange={(e) => handleChange("loopInterval", e.target.value)}
            />
            <span>Stunden</span>
          </div>
        </div>
      </div>
      <div className="flex justify-end gap-2  p-3 rounded">
        {isAdminLoggedIn && (
          <button
            onClick={() => firmwareUpdate(slot)}
            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
          >
            Firmware Update
          </button>
        )}
        <button
          onClick={() => handleDisplayEinschalten(slot)}
          className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
        >
          Display einschalten
        </button>{" "}
        <button
          onClick={handleSaveWrapper}
          className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
        >
          Speichern
        </button>
      </div>
    </div>
  );
}