// /components/modules/kue705FO/charts/ChartSwitcher.tsx
import React 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 } from "react-redux";
import { RootState } from "../../../../redux/store";

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

const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
  const activeMode = useSelector(
    (state: RootState) => state.chartData.activeMode
  );

  return (
    <ReactModal
      isOpen={isOpen}
      onRequestClose={onClose}
      ariaHideApp={false}
      style={{
        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
        content: {
          top: "50%",
          left: "50%",
          right: "auto",
          bottom: "auto",
          marginRight: "-50%",
          transform: "translate(-50%, -50%)",
          width: "80%",
          maxWidth: "50rem",
          height: "35rem",
          padding: "1rem",
          overflow: "hidden",
        },
      }}
    >
      <button
        onClick={onClose}
        style={{
          position: "absolute",
          top: "0.625rem",
          right: "0.625rem",
          background: "transparent",
          border: "none",
          fontSize: "1.5rem",
          cursor: "pointer",
        }}
      >
        <i className="bi bi-x-circle-fill"></i>
      </button>

      {/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}
      {activeMode === "Schleife" ? (
        <>
          <h3 className="text-lg font-semibold">Schleifenmessung</h3>
          <LoopChartActionBar />
          <LoopMeasurementChart /> {/* 🎯 Hier wird das Chart gerendert */}
        </>
      ) : (
        <>
          <h3 className="text-lg font-semibold">TDR-Messung</h3>
          <TDRChartActionBar />
          <TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
        </>
      )}
    </ReactModal>
  );
};

export default ChartSwitcher;