CPLv4.0/components/main/analogInputs/AnalogInputsTable.tsx

"use client"; // /components/main/analogInputs/AnalogInputsTable.tsx
import type { AnalogInput } from "@/types/analogInput";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "@/redux/store";
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
import { Icon } from "@iconify/react";
import settingsIcon from "@iconify/icons-mdi/settings";
import waveformIcon from "@iconify/icons-mdi/waveform";
import { setSelectedAnalogInput } from "@/redux/slices/analogInputs/selectedAnalogInputSlice";
import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
import {
  setSelectedId,
  setAutoLoad,
} from "@/redux/slices/analogInputs/analogInputsHistorySlice";

export default function AnalogInputsTable() {
  const dispatch = useDispatch<AppDispatch>();

  const [activeId, setActiveId] = React.useState<number | null>(null);

  useEffect(() => {
    dispatch(getAnalogInputsThunk());
  }, [dispatch]);

  const analogInputs = useSelector(
    (state: RootState) => state.analogInputs ?? []
  );

  const handleSelect = (id: number, input: AnalogInput) => {
    dispatch(setSelectedId(id));
    setActiveId(id);
    dispatch(setSelectedAnalogInput(input));
    dispatch(setAutoLoad(true));
  };

  return (
    <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1">
      <h2 className="laptop:text-sm  md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
        <Icon
          icon={waveformIcon}
          className="text-littwin-blue mr-2 text-2xl laptop:text-lg xl:text-xl 2xl:text-2xl border-2 border-littwin-blue rounded-md"
        />
        Messwerteingänge
      </h2>
      <div className="overflow-x-auto">
        <table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse">
          <thead className="bg-gray-100 border-b items-center ">
            <tr>
              <th className="border p-1 text-left">Eingang</th>
              <th className="border p-1 text-left">Messwert</th>
              <th className="border p-1 text-left">Einheit</th>
              <th className="border p-1 text-left">Bezeichnung</th>
              <th className="border p-1 text-left">Aktion</th>
            </tr>
          </thead>
          <tbody>
            {Object.values(analogInputs)
              .filter(
                (analogInput) =>
                  analogInput &&
                  typeof analogInput.id === "number" &&
                  typeof analogInput.label === "string"
              )
              .slice(0, 8)
              .map((analogInput, index) => (
                <tr
                  key={index}
                  className={`transition cursor-pointer ${
                    analogInput.id === activeId
                      ? "bg-blue-100"
                      : "hover:bg-gray-100"
                  }`}
                >
                  <td
                    className="border p-2"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    <div className="flex items-center gap-1 ">
                      <Icon
                        icon={waveformIcon}
                        className="text-gray-600 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
                      />
                      {analogInput.id ?? "-"}
                    </div>
                  </td>
                  <td
                    className="border p-2 text-right"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    {typeof analogInput.value === "number"
                      ? analogInput.value.toFixed(2)
                      : "-"}
                  </td>

                  <td
                    className="border p-2"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    {analogInput.unit || "-"}
                  </td>
                  <td
                    className="border p-2"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    {analogInput.label || "----"}
                  </td>

                  <td className="border p-2 text-center">
                    <button
                      onClick={() => {
                        handleSelect(analogInput.id!, analogInput);
                        dispatch(setIsSettingsModalOpen(true));
                      }}
                      className="text-gray-400 hover:text-gray-500"
                    >
                      <Icon icon={settingsIcon} className="text-xl" />
                    </button>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}