import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";

// components/main/fall-detection-sensors/FallSensors.tsx
interface FallSensorsProps {
  slotIndex: number;
}

const FallSensors: React.FC<FallSensorsProps> = ({ slotIndex }) => {
  const { kvzStatus } = useSelector((state: RootState) => state.kueDataSlice);

  // Nur 4 LEDs für den spezifischen Slot anzeigen
  const leds = Array.from({ length: 4 }, (_, ledIndex) => {
    const arrayIndex = slotIndex * 4 + ledIndex;
    const ledValue = kvzStatus?.[arrayIndex];

    // LED Status: 1 = grün, 0 = rot, 2 = grau, undefined = grau
    if (ledValue === 1) return "green";
    if (ledValue === 0) return "red";
    return "gray"; // für 2 oder undefined
  });

  return (
    <div className="bg-gray-300 border border-gray-400 rounded p-1   mt-4 w-full ">
      {/* Überschrift mit KVZ-Labels */}
      <div className="flex justify-between items-center mb-2">
        <span className="text-[8px] font-medium text-gray-700">KVZ1</span>
        <span className="text-[8px] font-medium text-gray-700">KVZ2</span>
        <span className="text-[8px] font-medium text-gray-700">KVZ3</span>
        <span className="text-[8px] font-medium text-gray-700">KVZ4</span>
      </div>

      {/* LEDs */}
      <div className="flex justify-between items-center">
        {leds.map((ledStatus, ledIndex) => {
          // LED Farben: grün (1), rot (0), grau (2)
          let bgColor = "bg-gray-400"; // Standard grau
          let statusText = "Unbekannt";

          if (ledStatus === "green") {
            bgColor = "bg-green-500";
            statusText = "Ein";
          } else if (ledStatus === "red") {
            bgColor = "bg-red-500";
            statusText = "Aus";
          }

          return (
            <div
              key={ledIndex}
              className={`w-4 h-4 rounded-full border border-gray-500 ${bgColor} flex-shrink-0`}
              title={`Slot ${slotIndex} LED${ledIndex + 1}: ${statusText}`}
            />
          );
        })}
      </div>
    </div>
  );
};

export default FallSensors;