import React, { useRef, useEffect, useState } from 'react';
import { ForceGraph2D } from 'react-force-graph';
import html2canvas from 'html2canvas'; 

const MyGraph = () => {
  const [graphData, setGraphData] = useState({
    nodes: [
      { id: 'A' },
      { id: 'B' },
      { id: 'C' },
      // ... more nodes
    ],
    links: [
      { source: 'A', target: 'B' },
      { source: 'B', target: 'C' },
      // ... more links
    ],
  });
  const graphRef = useRef(null);

  const handleDownloadImage = async () => {
    try {
      const graphElement = graphRef.current.container(); 
      const canvas = await html2canvas(graphElement);
      const dataURL = canvas.toDataURL('image/png'); 

      const link = document.createElement('a');
      link.href = dataURL;
      link.download = 'graph.png'; 
      link.click();
    } catch (error) {
      console.error('Error downloading graph image:', error);
    }
  };

  return (
    <div>
      <button onClick={handleDownloadImage}>Download Image</button>
      <ForceGraph2D
        ref={graphRef}
        width={600}
        height={400}
        graphData={graphData}
      />
    </div>
  );
};

export default MyGraph;

const puppeteer = require('puppeteer');

async function generateGraphImage() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to a URL where your React app is rendered (e.g., a local development server)
  await page.goto('http://localhost:3000/my-graph-page');

  // Wait for the graph to be rendered (you might need to use page.$ or page.$$ to target specific elements)

  // Capture the graph as an image
  const graphElement = await page.$('#graph-container'); // Replace with the actual selector
  await graphElement.screenshot({ path: 'graph.png' });

  await browser.close();
}

generateGraphImage();