import React from "react";
import ReactModal from "react-modal";
import TDRPopup from "./LoopTDRChartActionBar";

interface ChartModalProps {
  isOpen: boolean;
  onClose: () => void;
  chartRef: React.RefObject<HTMLCanvasElement>;
}

const ChartModal: React.FC<ChartModalProps> = ({
  isOpen,
  onClose,
  chartRef,
}) => {
  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: "30rem",
          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>

      <div style={{ maxHeight: "100%", overflow: "auto" }}>
        <TDRPopup />
      </div>

      <canvas
        id="myChart"
        ref={chartRef}
        style={{ width: "100%", height: "20rem" }}
      ></canvas>
    </ReactModal>
  );
};

export default ChartModal;