import { useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
import {
  BarController,
  BarElement,
  CategoryScale,
  Chart,
  LinearScale,
} from "chart.js";
import { ListGroup, Badge, ListGroupItem } from "reactstrap";
import { useTranslation } from "react-i18next";

import { useAvatarStore } from "src/Stores";

export default observer(() => {
  const { dateSet, dateValues } = useAvatarStore();
  const dateView = useRef<HTMLCanvasElement>(null);

  const { t } = useTranslation();

  useEffect(() => {
    const view2D = dateView.current?.getContext("2d");
    if (view2D) {
      Chart.register(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 (
    <ListGroup>
      <Badge>{t("avatarDateText")}</Badge>
      <ListGroupItem>
        <canvas ref={dateView} />
      </ListGroupItem>
    </ListGroup>
  );
});