/* eslint-disable @next/next/no-img-element */
import {Stat, StudentUser, User} from "@/interfaces/user";
import {useState} from "react";
import {averageLevelCalculator} from "@/utils/score";
import {groupByExam} from "@/utils/stats";
import {createColumnHelper} from "@tanstack/react-table";
import Checkbox from "@/components/Low/Checkbox";
import Table from "@/components/High/Table";

type StudentPerformanceItem = StudentUser & {entitiesLabel: string; group: string};

const StudentPerformanceList = ({items = [], stats}: {items: StudentPerformanceItem[]; stats: Stat[]}) => {
	const [isShowingAmount, setIsShowingAmount] = useState(false);

	const columnHelper = createColumnHelper<StudentPerformanceItem>();

	const columns = [
		columnHelper.accessor("name", {
			header: "Student Name",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("email", {
			header: "E-mail",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("studentID", {
			header: "ID",
			cell: (info) => info.getValue() || "N/A",
		}),
		columnHelper.accessor("group", {
			header: "Group",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("entitiesLabel", {
			header: "Entities",
			cell: (info) => info.getValue() || "N/A",
		}),
		columnHelper.accessor("levels.reading", {
			header: "Reading",
			cell: (info) =>
				!isShowingAmount
					? info.getValue() || 0
					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
		}),
		columnHelper.accessor("levels.listening", {
			header: "Listening",
			cell: (info) =>
				!isShowingAmount
					? info.getValue() || 0
					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
		}),
		columnHelper.accessor("levels.writing", {
			header: "Writing",
			cell: (info) =>
				!isShowingAmount
					? info.getValue() || 0
					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
		}),
		columnHelper.accessor("levels.speaking", {
			header: "Speaking",
			cell: (info) =>
				!isShowingAmount
					? info.getValue() || 0
					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
		}),
		columnHelper.accessor("levels.level", {
			header: "Level",
			cell: (info) =>
				!isShowingAmount
					? info.getValue() || 0
					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
		}),
		columnHelper.accessor("levels", {
			id: "overall_level",
			header: "Overall",
			cell: (info) =>
				!isShowingAmount
					? averageLevelCalculator(
							items,
							stats.filter((x) => x.user === info.row.original.id),
					  ).toFixed(1)
					: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
		}),
	];

	return (
		<div className="flex flex-col gap-4 w-full h-full">
			<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
				Show Utilization
			</Checkbox>
			<Table<StudentPerformanceItem>
				data={items.sort(
					(a, b) =>
						averageLevelCalculator(
							items,
							stats.filter((x) => x.user === b.id),
						) -
						averageLevelCalculator(
							items,
							stats.filter((x) => x.user === a.id),
						),
				)}
				columns={columns}
				searchFields={[["name"], ["email"], ["studentID"], ["entitiesLabel"], ["group"]]}
			/>
		</div>
	);
};

export default StudentPerformanceList;