import useAssignments from "@/hooks/useAssignments";
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
import useGroups from "@/hooks/useGroups";
import useUsers, {userHashCorporate, userHashStudent} from "@/hooks/useUsers";
import {Stat, User} from "@/interfaces/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 {users: students} = useUsers(userHashStudent);
	const {users: corporates} = useUsers(userHashCorporate);
	const {groups} = useGroups({admin: user.id, userType: user.type});
	const {data: stats} = useFilterRecordsByUser<Stat[]>();

	const {reload: reloadAssignments, isLoading: isAssignmentsLoading} = useAssignments({corporate: user.id});

	const router = useRouter();

	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={reloadAssignments}
					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", isAssignmentsLoading && "animate-spin")} />
				</div>
			</div>
			<StudentPerformanceList items={students} stats={stats} users={corporates} groups={groups} />
		</>
	);
};

export default StudentPerformancePage;
