import ReactModal from "react-modal";
import { useState, useEffect } from "react";

function KueModal({ showModal, onClose, slot }) {
  // Verwende ein Array von Bezeichnungen und Isolationsgrenzwerten für 32 Slots
  const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
  const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
    Array(32).fill(0)
  ); // Default 10.0 MOhm
  const handleVerzögerungChange = (e) => {
    let value = e.target.value;

    // Wertebereich von 1 bis 999 überprüfen
    if (value < 1) value = 1;
    if (value > 999) value = 999;

    e.target.value = value; // Setze den korrigierten Wert zurück in das Inputfeld
  };

  useEffect(() => {
    // Initialisiere die Bezeichnungen basierend auf window.kueName
    if (window.kueName && Array.isArray(window.kueName)) {
      setBezeichnungen((prevBezeichnungen) => {
        const updatedBezeichnungen = [...prevBezeichnungen];
        for (let i = 0; i < 32; i++) {
          updatedBezeichnungen[i] = window.kueName[i]?.trim() || "---"; // Leerzeichen entfernen
        }
        return updatedBezeichnungen;
      });
    }

    // Initialisiere die Isolationsgrenzwerte basierend auf window.kueLimit1
    if (window.kueLimit1 && Array.isArray(window.kueLimit1)) {
      setIsolationsgrenzwerte((prevIsolationsgrenzwerte) => {
        const updatedGrenzwerte = [...prevIsolationsgrenzwerte];
        for (let i = 0; i < 32; i++) {
          updatedGrenzwerte[i] = window.kueLimit1[i] || 10.0; // Default zu 10.0
        }
        return updatedGrenzwerte;
      });
    }
  }, []);

  // Funktion zum Ändern der Bezeichnung für den aktuellen Slot
  const handleBezeichnungChange = (e, slot) => {
    const newBezeichnung = e.target.value;
    setBezeichnungen((prevBezeichnungen) => {
      const updatedBezeichnungen = [...prevBezeichnungen];
      updatedBezeichnungen[slot] = newBezeichnung;
      return updatedBezeichnungen;
    });
  };

  // Funktion zum Ändern des Isolationsgrenzwerts für den aktuellen Slot
  const handleIsolationsgrenzwertChange = (e, slot) => {
    const newGrenzwert = e.target.value;
    setIsolationsgrenzwerte((prevGrenzwerte) => {
      const updatedGrenzwerte = [...prevGrenzwerte];
      updatedGrenzwerte[slot] = newGrenzwert;
      return updatedGrenzwerte;
    });
  };

  return (
    <ReactModal
      isOpen={showModal}
      onRequestClose={onClose}
      ariaHideApp={false}
      style={{
        overlay: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 100,
        },
        content: {
          top: "50%",
          left: "50%",
          right: "auto",
          bottom: "auto",
          marginRight: "-50%",
          transform: "translate(-50%, -50%)",
          width: "90%",
          maxWidth: "800px",
          padding: "0",
          borderRadius: "8px",
          border: "none",
        },
      }}
    >
      {/* Modal Header */}
      <div className="flex items-center justify-between bg-littwin-blue text-white p-2 rounded-t-lg">
        <h2 className="text-sm font-bold">KUE Einstellung</h2>
        <button onClick={onClose} className="text-white text-lg font-bold">
          &times;
        </button>
      </div>

      {/* Modal Body */}
      <div className="p-2">
        <table className="w-full text-left border-collapse">
          <thead className="bg-gray-100">
            <tr>
              <th className="p-2 border text-sm text-center">KÜ</th>
              <th className="p-2 border text-sm text-center">Bezeichnung</th>
              <th className="p-2 border text-sm text-center">
                Isolationsgrenzwert
              </th>
              <th className="p-2 border text-sm text-center">Verzögerung</th>
              <th className="p-2 border text-sm text-center">
                Schleifengrenzwert
              </th>

              {/* 
                     <th className="p-2 border text-sm text-center">TDR Aktiv</th>
              <th className="p-2 border text-sm text-center">KVZ Aktiv</th>
              <th className="p-2 border text-sm">Datenlogger</th>
              */}
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="p-2 border text-center">{slot + 1}</td>
              <td className="p-2 border">
                <input
                  type="text"
                  className="w-[6rem] border rounded p-1 text-sm"
                  value={bezeichnungen[slot] || "---"} // Setze den Wert oder "---"
                  onChange={(e) => handleBezeichnungChange(e, slot)} // Update Bezeichnung bei Änderung
                />
              </td>
              <td className="p-2 border text-center text-sm">
                <input
                  type="number"
                  className="w-16 border rounded p-1 text-sm"
                  value={isolationsgrenzwerte[slot]} // Setze den Isolationsgrenzwert
                  onChange={(e) => handleIsolationsgrenzwertChange(e, slot)} // Update Isolationsgrenzwert bei Änderung
                />{" "}
                MOhm
              </td>
              <td className="p-2 border text-center text-sm">
                {/* Flexbox für Verzögerung */}
                <div className="flex items-center justify-center">
                  <input
                    type="number"
                    className="w-12 border rounded p-1 text-sm"
                    defaultValue="420"
                    onChange={handleVerzögerungChange}
                  />
                  <span className="ml-1">sek.</span>
                </div>
              </td>
              <td className="p-2 border text-center text-sm">
                <input
                  type="number"
                  className="w-16 border rounded p-1"
                  defaultValue="0.10"
                />{" "}
                kOhm
              </td>

              {/* 
                         <td className="p-2 border text-center">
                <input type="checkbox" defaultChecked />
              </td>
              <td className="p-2 border text-center">
                <input type="checkbox" defaultChecked />
              </td>
              <td className="p-2 border">
                <select className="border rounded p-1 w-full">
                  <option value="aus">aus</option>
                  <option value="ein">1 (1 min)</option>
                  <option value="zwei">2 (2 min)</option>
                  <option value="drei">3 (3 min)</option>
                  <option value="vier">4 (4 min)</option>
                  <option value="fuenf">5 (5 min)</option>
                  <option value="sechs">6 (6 min)</option>
                  <option value="sieben">7 (7 min)</option>
                  <option value="acht">8 (8 min)</option>
                  <option value="neun">9 (9 min)</option>
                  <option value="zehn">10 (10 min)</option>
                </select>
              </td>
              */}
            </tr>
          </tbody>
        </table>
      </div>

      {/* Modal Footer */}
      <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
        <button
          onClick={onClose}
          className="bg-blue-500 text-white p-2 rounded flex items-center"
        >
          <span className="mr-2">💾</span> Speichern
        </button>
      </div>
    </ReactModal>
  );
}

export default KueModal;