import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

interface DataChartProps {
  chartData?: any;
  graphTitle?: string;
  fullData?: boolean;
  overrideBorderColor?: string
  overrideBGColor?: string
}

const DataChart: React.FC<DataChartProps> = ({
  chartData,
  graphTitle,
  fullData,
  overrideBGColor,
  overrideBorderColor
}) => {
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: "top" as const,
      },
      title: {
        display: true,
        text: graphTitle || "Historical Subscriber Data",
        font: {
          size: 18,
        },
      },
    },
    scales: {
      x: {
        ticks: {
          autoSkip: true,
          maxTicksLimit: 10,
        },
      },
    },
  };

  const data = {
    labels: chartData.labels,
    datasets: [
      {
        label: "Subscriber Count",
        data: chartData.datasets,
        borderColor: overrideBorderColor||"rgb(255, 99, 132)",
        backgroundColor: overrideBGColor||"rgba(255, 99, 132, 0.5)",
      },
    ],
  };

  if (!fullData) {
    return <Line options={options} data={data} />;
  } else {
    return <Line options={options} data={chartData} />;
  }
};

export default DataChart;