"use client";
import React, { useState, useEffect } from "react";
import Kue705FO from "../../components/modules/Kue705FO";

function Kabelueberwachung() {
  const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
  const [activeRack, setActiveRack] = useState(1); // Track the active rack
  const [kueIso, setKueIso] = useState([]); // State to store isolation values
  const [kueName, setKueName] = useState([]); // State to store the KUE names
  const [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values
  //const [kueOnline, setKueOnline] = useState([ 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, ]); // Example array for module status
  const [kueOnline, setKueOnline] = useState([]); // State to store the module status

  // Function to handle rack change
  const changeRack = (rack) => {
    setActiveRack(rack);
  };

  // Load the external JavaScript file and fetch the isolation values
  useEffect(() => {
    if (window.kueIso && Array.isArray(window.kueIso)) {
      setKueIso(window.kueIso); // Store the isolation values from the global variable
    }

    if (window.kueRes && Array.isArray(window.kueRes)) {
      setSchleifenwiderstand(window.kueRes); // Store the resistance values from the global variable
    }

    if (window.kueOnline && Array.isArray(window.kueOnline)) {
      setKueOnline(window.kueOnline); // Store the module status from the global variable
    }
    if (window.kueName && Array.isArray(window.kueName)) {
      setKueName(window.kueName); // Store the KUE names from the global variable
    }
  }, []);

  // Data for each rack, using isolation values from kueIso, kueName, and schleifenwiderstand
  const racks = {
    rack1: kueIso.slice(0, 8).map((value, index) => ({
      isolationswert: value, // Isolation value for this slot
      schleifenwiderstand: schleifenwiderstand[index], // Resistance for this slot
      modulName: kueName[index] || "Unknown", // Name for this slot
      kueOnlineStatus: kueOnline[index], // Online status for this slot
    })),
    rack2: kueIso.slice(8, 16).map((value, index) => ({
      isolationswert: value,
      schleifenwiderstand: schleifenwiderstand[8 + index],
      modulName: kueName[8 + index] || "Unknown",
      kueOnlineStatus: kueOnline[8 + index], // Online status for this slot
    })),
    rack3: kueIso.slice(16, 24).map((value, index) => ({
      isolationswert: value,
      schleifenwiderstand: schleifenwiderstand[16 + index],
      modulName: kueName[16 + index] || "Unknown",
      kueOnlineStatus: kueOnline[16 + index], // Online status for this slot
    })),
    rack4: kueIso.slice(24, 32).map((value, index) => ({
      isolationswert: value,
      schleifenwiderstand: schleifenwiderstand[24 + index],
      modulName: kueName[24 + index] || "Unknown",
      kueOnlineStatus: kueOnline[24 + index], // Online status for this slot
    })),
  };

  useEffect(() => {
    const script = document.createElement("script");
    script.src = `${apiUrl}CPL?Service/kueData.js`; // Path to your JavaScript file
    script.async = true;
    document.body.appendChild(script);

    // Once the script is loaded, get the isolation values
    /*     script.onload = () => {
      if (window.kueName && Array.isArray(window.kueName)) {
        setKueName(window.kueName); // Store the KUE names from the global variable
      }
    }; */

    // Cleanup the script if the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "CPL?last20Messages.acp"; // Path to your JavaScript file
    script.async = true;
    document.body.appendChild(script);

    // Once the script is loaded, get the isolation values
    /*     script.onload = () => {
      if (window.kueName && Array.isArray(window.kueName)) {
        setKueName(window.kueName); // Store the KUE names from the global variable
      }
    }; */

    // Cleanup the script if the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="bg-gray-100 flex-1 p-6">
      <h1 className="text-2xl mb-4">Kabelüberwachung</h1>

      {/* Tabs for Racks */}
      <div className="mb-4">
        <button
          onClick={() => changeRack(1)}
          className={`mr-2 ${
            activeRack === 1 ? "bg-blue-500 text-white" : "bg-gray-300"
          }`}
        >
          Rack 1
        </button>
        <button
          onClick={() => changeRack(2)}
          className={`mr-2 ${
            activeRack === 2 ? "bg-blue-500 text-white" : "bg-gray-300"
          }`}
        >
          Rack 2
        </button>
        <button
          onClick={() => changeRack(3)}
          className={`mr-2 ${
            activeRack === 3 ? "bg-blue-500 text-white" : "bg-gray-300"
          }`}
        >
          Rack 3
        </button>
        <button
          onClick={() => changeRack(4)}
          className={`mr-2 ${
            activeRack === 4 ? "bg-blue-500 text-white" : "bg-gray-300"
          }`}
        >
          Rack 4
        </button>
      </div>

      {/* Slots for the active rack */}
      <div className="flex flex-row justify-between">
        {racks[`rack${activeRack}`].map((slot, index) => (
          <div key={index} className="flex-grow">
            <Kue705FO
              isolationswert={slot.isolationswert}
              schleifenwiderstand={slot.schleifenwiderstand}
              modulName={slot.modulName}
              kueOnline={kueOnline}
              slotIndex={index + (activeRack - 1) * 8} // Slot index calculation for each rack
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default Kabelueberwachung;