import {Module} from "@/interfaces";
import {UserResults} from "@/interfaces/results";
import {SEMI_TRANSPARENT} from "@/resources/colors";
import {moduleLabels} from "@/utils/moduleUtils";
import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
import clsx from "clsx";
import {PolarArea} from "react-chartjs-2";

interface Props {
	results: UserResults;
	resultKey: "score" | "total";
	label: string;
	className?: string;
}

ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);

export default function UserResultChart({results, resultKey, label, className = ""}: Props) {
	const labels = Object.keys(results).map((key) => moduleLabels[key as Module]);
	const data = {
		labels,
		datasets: [
			{
				label,
				data: Object.keys(results).map((module) => results[module as Module][resultKey]),
				backgroundColor: Object.values(SEMI_TRANSPARENT),
			},
		],
	};

	return (
		<div className={clsx("flex flex-col gap-4 items-center", className)}>
			<PolarArea data={data} options={{plugins: {title: {text: label, display: true}}}} />
			<h2 className="text-neutral-600 font-semibold text-lg">{label}</h2>
		</div>
	);
}