"use client"; // components/main/einausgaenge/DigitalInputs.tsx
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";
import { Icon } from "@iconify/react";

export default function DigitalInputs({ openInputModal }) {
  const digitalInputs = useSelector(
    (state: RootState) => state.digitalInputs.inputs
  );

  // **Gruppiere Eingänge in zwei Tabellen**
  const midIndex = Math.ceil(digitalInputs.length / 2);
  const inputsGroup1 = digitalInputs.slice(0, midIndex);
  const inputsGroup2 = digitalInputs.slice(midIndex);

  return (
    <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-full flex-grow flex flex-col">
      <h2 className="text-md font-bold mb-4 flex items-center">
        <Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" />
        Digitale Eingänge
      </h2>
      <div className="grid grid-cols-2 gap-4">
        {[inputsGroup1, inputsGroup2].map((group, index) => (
          <div key={index} className="flex-grow">
            <table className="w-full text-sm border-collapse bg-white rounded-lg">
              <thead className="bg-gray-100 border-b">
                <tr>
                  <th className="px-2 py-1 text-left">Eingang</th>
                  <th className="px-2 py-1 text-left">Zustand</th>
                  <th className="px-2 py-1 text-left">Bezeichnung</th>
                  <th className="px-2 py-1 text-left">Aktion</th>
                </tr>
              </thead>
              <tbody>
                {group.map((input) => (
                  <tr key={input.id} className="border-b">
                    <td className="flex items-center p-2 xl:py-0 2xl:p-1">
                      <Icon
                        icon="mdi:input"
                        className="text-black-500 mr-2 text-xl"
                      />
                      {input.id}
                    </td>
                    <td className="p-2 xl:py-0">
                      <span
                        className={
                          input.status ? "text-green-500" : "text-red-500"
                        }
                      >
                        {input.status ? "●" : "⨉"}
                      </span>
                    </td>
                    <td className="p-2 xl:py-0">{input.label}</td>
                    <td className="p-2 xl:py-0">
                      <Icon
                        icon="mdi:settings"
                        className="text-gray-400 text-lg cursor-pointer"
                        onClick={() => openInputModal(input)}
                      />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
      </div>
    </div>
  );
}