import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import styles from "./Graph.module.sass";

export default function Graph(props) {
  Chart.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
  );

  const accounts = [
    ...new Set(
      props.transactions
        .map((txn) => {
          return txn.parts.map((part) => {
            return part.account;
          });
        })
        .flat()
    ),
  ];

  return (
    <div className={styles.graph}>
      <Line
        options={{ responsive: true, maintainAspectRatio: false }}
        data={{
          labels: ["JAN", "FEB", "MAR"],
          datasets: accounts.map((account) => {
            return {
              label: account,
              data: [1, 2, 4],
              // backgroundColor: getComputedStyle(
                // document.documentElement
              // ).getPropertyValue("--color-blue"),
              // borderColor: document.documentElement.style.getPropertyValue("--color-blue"),
            };
          }),
        }}
      />
    </div>
  );
}