import React, { useState, useEffect } from 'react';
import { FaTimes } from 'react-icons/fa';
import './Graph.css';

export default function Graph({ open, onClose, payload, onError }) {
  const [graphHtml, setGraphHtml] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    // if (open && payload) {
    if (open) {
      setLoading(true);
      setError("");
      fetch("/action/graph", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify()
        // body: JSON.stringify(payload)
      })
        .then(res => res.json())
        .then(data => {
          // If the API returns an error, throw it to be caught below.
          if (data.error) {
            throw new Error(data.error);
          }
          setGraphHtml(data.result);
          setLoading(false);
        })
        .catch(err => {
          console.error("Error fetching graph:", err);
          const errMsg = err.message || "Error fetching graph.";
          setError(errMsg);
          setLoading(false);
          // Propagate error to parent using the onError callback.
          if (onError && typeof onError === 'function') {
            onError(errMsg);
          }
        });
    }
  }, [open, onError]);
  // }, [open, payload, onError]);

  if (!open) return null;

  return (
    <div className="graph-dialog-container" onClick={onClose}>
      <div className="graph-dialog-inner" onClick={e => e.stopPropagation()}>
        <div className="graph-dialog-header">
          <h3 className="graph-dialog-title">Graph Display</h3>
          <button className="graph-dialog close-btn" onClick={onClose}>
            <FaTimes />
          </button>
        </div>
        <div className="graph-dialog-content">
          {loading ? (
            <div className="graph-loading">
              <p>Loading Graph...</p>
            </div>
          ) : error ? (
            <p className="graph-error">{error}</p>
          ) : (
            <iframe
              title="Graph Display"
              srcDoc={graphHtml}
              style={{ border: "none", width: "100%", height: "625px" }}
            />
          )}
        </div>
      </div>
    </div>
  );
}