import { BarController, BarElement, CategoryScale, Chart, LinearScale } from "chart.js";
Chart.register(BarController, BarElement, CategoryScale, LinearScale);

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
function getRandomColorUniq(list: string[]) {
  let color = getRandomColor();
  while (list.includes(color)) {
    color = getRandomColor();
  }
  return color;
}
function hexToRgb(hex: string) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  // biome-ignore lint/performance/useTopLevelRegex: Performance impact is minimal
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  const hexrgb = hex.replace(shorthandRegex, (_m, r, g, b) => {
    return r + r + g + g + b + b;
  });

  // biome-ignore lint/performance/useTopLevelRegex: Performance impact is minimal
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexrgb);
  return result
    ? {
        r: Number.parseInt(result[1], 16),
        g: Number.parseInt(result[2], 16),
        b: Number.parseInt(result[3], 16),
      }
    : null;
}

document.addEventListener("DOMContentLoaded", () => {
  const ctx = (document.getElementById("statsChart") as HTMLCanvasElement).getContext(
    "2d",
  );
  const labels: string[] = [];
  const total: string[] = [];
  const colors: string[] = [];
  const colorsDimmed: string[] = [];
  for (const element of Array.from(document.getElementsByClassName("types"))) {
    labels.push(element.childNodes[0].textContent);
  }
  for (const element of Array.from(document.getElementsByClassName("total"))) {
    total.push(element.childNodes[0].childNodes[0].textContent);
  }

  for (const _ of labels) {
    colors.push(getRandomColorUniq(colors));
  }

  for (const element of colors) {
    const rgbColor = hexToRgb(element);
    colorsDimmed.push(`rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.2)`);
  }

  for (const element of colors) {
    const rgbColorDimmed = hexToRgb(element);
    colorsDimmed.push(
      `rgba(${rgbColorDimmed.r}, ${rgbColorDimmed.g}, ${rgbColorDimmed.b}, 0.2)`,
    );
  }

  new Chart(ctx, {
    type: "bar",
    data: {
      labels: labels,
      datasets: [
        {
          label: document.getElementById("graphLabel").childNodes[0].textContent,
          data: total,
          backgroundColor: colorsDimmed,
          borderColor: colors,
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
});