"use client";
import React from "react";
import KabelModulStatus from "./modulesStatus/KabelModulStatus";

interface BaugruppentraegerProps {
  kueOnline: number[];
  kueVersion: (number | string)[];
  kueCableBreak: number[];
  kueAlarm1: number[];
  kueAlarm2: number[];
  kueGroundFault: number[];
  handleModuleClick: (rackNumber: number) => void;
}

const Baugruppentraeger: React.FC<BaugruppentraegerProps> = ({
  kueOnline,
  kueVersion,
  kueCableBreak,
  kueAlarm1,
  kueAlarm2,
  kueGroundFault,
  handleModuleClick,
}) => {
  const baugruppen: JSX.Element[] = [];
  const numBaugruppen = Math.ceil(kueOnline.length / 8);

  for (let i = 0; i < numBaugruppen; i++) {
    const slots = kueOnline.slice(i * 8, (i + 1) * 8);

    baugruppen.push(
      <div
        key={i}
        className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 lg:mb-0 border border-gray-200 w-full laptop:scale-y-75 xl:scale-y-90"
      >
        <div className="flex gap-1">
          {slots.map((version, index) => {
            const slotNumber = i * 8 + index + 1;
            const isSlotOnline = kueOnline[slotNumber - 1] === 1;
            const rawModuleVersion = kueVersion[slotNumber - 1] || version;

            // Sicherstellen, dass moduleVersion eine Zahl ist
            const moduleVersion =
              typeof rawModuleVersion === "number"
                ? rawModuleVersion
                : parseFloat(rawModuleVersion) || 0;

            const rackNumber = Math.ceil(slotNumber / 8);

            return (
              <div
                key={slotNumber}
                className="cursor-pointer"
                onClick={() => handleModuleClick(rackNumber)}
              >
                <KabelModulStatus
                  slot={slotNumber}
                  isOnline={isSlotOnline}
                  moduleVersion={moduleVersion}
                  kueCableBreak={kueCableBreak}
                  kueAlarm1={kueAlarm1}
                  kueAlarm2={kueAlarm2}
                  kueGroundFault={kueGroundFault}
                />
              </div>
            );
          })}
        </div>
      </div>
    );
  }
  return <>{baugruppen}</>;
};

export default Baugruppentraeger;