CPLv4.0/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx

"use client"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx

import React, { useState } from "react";
import ReactModal from "react-modal";
import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
import TDRChart from "./TDRChart/TDRChart";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../redux/store";
import {
  setChartOpen,
  setFullScreen,
} from "../../../../../redux/slices/kabelueberwachungChartSlice";
import {
  setSelectedSlot,
  setSelectedChartType,
} from "../../../../../redux/slices/tdrChartSlice";
import { resetBrushRange } from "../../../../../redux/slices/brushSlice";

interface ChartSwitcherProps {
  isOpen: boolean;
  onClose: () => void;
  slotIndex: number;
}

const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
  isOpen,
  onClose,
  slotIndex,
}) => {
  const dispatch = useDispatch();

  // **Redux-States für aktive Messkurve (TDR oder Schleife)**
  const activeMode = useSelector(
    (state: RootState) => state.kueChartMode.activeMode
  );
  const isFullScreen = useSelector(
    (state: RootState) => state.kabelueberwachungChart.isFullScreen
  );

  // **Modal schließen + Redux-Status zurücksetzen**
  const handleClose = () => {
    dispatch(setChartOpen(false));
    dispatch(setFullScreen(false));
    dispatch(resetBrushRange());
    onClose();
  };

  // **Vollbildmodus umschalten**
  const toggleFullScreen = () => {
    dispatch(setFullScreen(!isFullScreen));
  };

  // **Slot und Messkurve setzen**
  const setChartType = (chartType: "TDR" | "Schleife") => {
    dispatch(setSelectedSlot(slotIndex));
    dispatch(setSelectedChartType(chartType));
  };

  return (
    <ReactModal
      isOpen={isOpen}
      onRequestClose={handleClose}
      ariaHideApp={false}
      style={{
        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
        content: {
          top: "50%",
          left: "50%",
          bottom: "auto",
          marginRight: "-50%",
          transform: "translate(-50%, -50%)",
          width: isFullScreen ? "90vw" : "70rem",
          height: isFullScreen ? "90vh" : "35rem",
          padding: "1rem",
          transition: "all 0.3s ease-in-out",
          display: "flex",
          flexDirection: "column",
        },
      }}
    >
      {/* Action-Buttons */}
      <div
        style={{
          position: "absolute",
          top: "0.625rem",
          right: "0.625rem",
          display: "flex",
          gap: "0.75rem",
        }}
      >
        {/* Fullscreen-Button */}
        <button
          onClick={toggleFullScreen}
          style={{
            background: "transparent",
            border: "none",
            fontSize: "1.5rem",
            cursor: "pointer",
          }}
        >
          <i
            className={
              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
            }
          ></i>
        </button>

        {/* Schließen-Button */}
        <button
          onClick={handleClose}
          style={{
            background: "transparent",
            border: "none",
            fontSize: "1.5rem",
            cursor: "pointer",
          }}
        >
          <i className="bi bi-x-circle-fill"></i>
        </button>
      </div>

      {/* Chart-Container */}
      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          height: "100%",
        }}
      >
        {/* Auswahl zwischen TDR und Schleife */}
        <div className="flex space-x-4 mb-4">
          <button
            className={`p-2 text-white ${
              activeMode === "TDR" ? "bg-blue-500" : "bg-gray-400"
            }`}
            onClick={() => setChartType("TDR")}
          >
            TDR
          </button>
          <button
            className={`p-2 text-white ${
              activeMode === "Schleife" ? "bg-blue-500" : "bg-gray-400"
            }`}
            onClick={() => setChartType("Schleife")}
          >
            Schleife
          </button>
        </div>

        {activeMode === "Schleife" ? (
          <>
            <h3 className="text-lg font-semibold">Schleifenmessung</h3>
            <LoopChartActionBar />
            <div style={{ flex: 1, height: "90%" }}>
              <LoopMeasurementChart />
            </div>
          </>
        ) : (
          <>
            <h3 className="text-lg font-semibold">TDR-Messung</h3>
            <TDRChart isFullScreen={isFullScreen} />
          </>
        )}
      </div>
    </ReactModal>
  );
};

export default ChartSwitcher;