import React from "react";
import { Bar } from "react-chartjs-2";
import { Chart, CategoryScale, BarElement, LogarithmicScale } from "chart.js";
import styles from "./RepoSummary.module.sass";

Chart.register(CategoryScale, BarElement, LogarithmicScale);

function sortByValue(obj) {
  return Object.entries(obj).sort(([, a], [, b]) => b - a);
}
export function RepoSummary(props) {
  const langs = sortByValue(props.stats.languages);
  console.log(props.publicGithubRepos);
  return (
    <div className={styles.container}>
      <Bar
        options={{
          indexAxis: "y",
          responsive: true,
          scales: {
            myScale: {
              type: "logarithmic",
              position: "bottom",
            },
          },
        }}
        data={{
          labels: langs.map((obj) => {
            return obj[0];
          }),
          datasets: [
            {
              label: "D1",
              data: langs.map((obj) => {
                return obj[1];
              }),
              backgroundColor: "#355070",
            },
          ],
        }}
      />
    </div>
  );
}