import { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';
import { getChartColors, getComputedColors } from '../utils/chart-colors';

export function useChartExport() {
  const chartRef = useRef<HTMLDivElement>(null);

  const exportChart = useCallback(async (filename: string = 'chart.png') => {
    if (!chartRef.current) {
      console.error('Chart ref not available');
      return;
    }

    try {
      // Get background color from CSS variable
      const colors = getChartColors();
      const computedColors = getComputedColors(colors);
      const backgroundColor = computedColors.tooltipBg || colors.tooltipBg;

      const dataUrl = await toPng(chartRef.current, {
        quality: 1.0,
        pixelRatio: 2, // High DPI export
        backgroundColor: backgroundColor
      });

      // Create download link
      const link = document.createElement('a');
      link.download = filename;
      link.href = dataUrl;
      link.click();
    } catch (error) {
      console.error('Failed to export chart:', error);
      throw error;
    }
  }, []);

  return { chartRef, exportChart };
}