import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
import useGroups from "@/hooks/useGroups";
import useUsers, {userHashStudent} from "@/hooks/useUsers";
import {Stat, User} from "@/interfaces/user";
import {getUserCompanyName} from "@/resources/user";
import clsx from "clsx";
import {useRouter} from "next/router";
import {BsArrowLeft, BsArrowRepeat} from "react-icons/bs";
import StudentPerformanceList from "./StudentPerformanceList";

interface Props {
	user: User;
}

const StudentPerformancePage = ({user}: Props) => {
	const {groups} = useGroups({admin: user.id});
	const {users: students, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(userHashStudent);
	const {data: stats} = useFilterRecordsByUser<Stat[]>();

	const router = useRouter();

	const performanceStudents = students.map((u) => ({
		...u,
		group: groups.find((x) => x.participants.includes(u.id))?.name || "N/A",
		corporateName: getUserCompanyName(user, [], groups),
	}));

	return (
		<>
			<div className="w-full flex justify-between items-center">
				<div
					onClick={() => router.push("/")}
					className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
					<BsArrowLeft className="text-xl" />
					<span>Back</span>
				</div>
				<div
					onClick={reloadStudents}
					className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
					<span>Reload</span>
					<BsArrowRepeat className={clsx("text-xl", isStudentsLoading && "animate-spin")} />
				</div>
			</div>
			<StudentPerformanceList items={performanceStudents} stats={stats} users={students} />
		</>
	);
};

export default StudentPerformancePage;
