import html2canvas from "html2canvas";

export const captureVisualization = async (): Promise<string | null> => {
  const container = document.getElementById("real-time-vis-canvas");
  if (!container) {
    console.error("Container element not found");
    return null;
  }

  try {
    // Hide any elements you don't want in the screenshot
    const originalVisibility = container.style.visibility;
    container.style.visibility = 'visible';
    
    const canvas = await html2canvas(container, {
      scale: 2, // Higher scale for better quality
      logging: false, // Disable console logging
      useCORS: true, // Handle cross-origin images
      allowTaint: true, // Allow tainted canvas
      backgroundColor: '#ffffff', // Set white background
      removeContainer: true // Clean up temporary containers
    });

    // Restore original visibility
    container.style.visibility = originalVisibility;

    // Convert to PNG with highest quality
    return canvas.toDataURL('image/png', 1.0);
  } catch (error) {
    console.error("Error capturing visualization:", error);
    return null;
  }
};