import React, { useEffect, useRef } from "react";

let googleChartsLoaded = false;

export const loadGoogleCharts = () => {
  if (googleChartsLoaded) return Promise.resolve();

  return new Promise((resolve) => {
    let scriptSrc;
    const basePath = "/wp-content/plugins/Casaca/";
    scriptSrc = basePath + "dist/js/google-charts/loader.js";

    const script = document.createElement("script");
    script.src = scriptSrc;
    script.async = true;
    script.onload = () => {
      googleChartsLoaded = true;
      window.google.charts.load("current", { packages: ["corechart"] });
      window.google.charts.setOnLoadCallback(resolve);
    };
    document.head.appendChild(script);
  });
};

export const Chart = ({
  chartType,
  data,
  options,
  width,
  height,
  chartEvents = [],
}) => {
  const chartRef = useRef(null);

  useEffect(() => {
    let mounted = true;

    const drawChart = async () => {
      if (!mounted) return;

      await loadGoogleCharts();

      if (!chartRef.current || !window.google || !window.google.visualization)
        return;

      if (!data || !Array.isArray(data) || data.length < 1) {
        console.warn("Dados do gráfico inválidos ou vazios:", data);
        return null;
      }

      const dataTable = window.google.visualization.arrayToDataTable(data);

      let chart;
      switch (chartType) {
        case "BarChart":
          chart = new window.google.visualization.BarChart(chartRef.current);
          break;
        case "PieChart":
          chart = new window.google.visualization.PieChart(chartRef.current);
          break;
        case "LineChart":
          chart = new window.google.visualization.LineChart(chartRef.current);
          break;
        case "Table":
          chart = new window.google.visualization.Table(chartRef.current);
          break;
        default:
          chart = new window.google.visualization.BarChart(chartRef.current);
      }

      if (chartEvents && chartEvents.length) {
        chartEvents.forEach((event) => {
          if (event.eventName && event.callback) {
            window.google.visualization.events.addListener(
              chart,
              event.eventName,
              (...args) => {
                event.callback({
                  chartWrapper: { getChart: () => chart },
                  ...args,
                });
              }
            );
          }
        });
      }
      chart.draw(dataTable, options);
    };

    drawChart();

    return () => {
      mounted = false;
    };
  }, [chartType, data, options, width, height, chartEvents]);

  return React.createElement("div", {
    ref: chartRef,
    style: { width, height },
  });
};