import {
  BarController,
  BarElement,
  CategoryScale,
  Chart,
  LinearScale,
  LineController,
} from "chart.js";
import { observer } from "mobx-react-lite";
import { useEffect, useRef } from "react";
import Card from "react-bootstrap/Card";
import CardBody from "react-bootstrap/CardBody";
import CardHeader from "react-bootstrap/CardHeader";

export default observer<{
  title: string;
  dateSet: string[];
  dateValues: number[];
}>(({ title, dateSet, dateValues }) => {
  const dateView = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const view2D = dateView.current?.getContext("2d");
    if (view2D) {
      Chart.register(
        LineController,
        BarController,
        BarElement,
        CategoryScale,
        LinearScale,
      );

      const view = new Chart(view2D, {
        type: "bar",
        data: {
          labels: dateSet,
          datasets: [
            {
              data: dateValues,
              backgroundColor: "white",
            },
          ],
        },
        options: {
          scales: {
            x: {
              display: false,
            },
            y: {
              display: false,
            },
          },
        },
      });

      return () => {
        view.destroy();
        Chart.unregister(BarController, BarElement, CategoryScale, LinearScale);
      };
    }
  }, [dateSet, dateValues]);

  return (
    <Card>
      <CardHeader>{title}</CardHeader>
      <CardBody>
        <canvas ref={dateView} />
      </CardBody>
    </Card>
  );
});