import useUsers, {userHashStudent, userHashTeacher} from "@/hooks/useUsers";
import {CorporateUser, User} from "@/interfaces/user";
import {useRouter} from "next/router";
import {useMemo} from "react";
import {BsArrowLeft} from "react-icons/bs";
import MasterStatistical from "../MasterCorporate/MasterStatistical";

interface Props {
	user: CorporateUser;
}

const MasterStatisticalPage = ({user}: Props) => {
	const {users: students} = useUsers(userHashStudent);
	const {users: teachers} = useUsers(userHashTeacher);

	// this workaround will allow us toreuse the master statistical due to master corporate restraints
	// while still being able to use the corporate user
	const groupedByNameCorporateIds = useMemo(
		() => ({
			[user.corporateInformation?.companyInformation?.name || user.name]: [user.id],
		}),
		[user],
	);

	const teachersAndStudents = useMemo(() => [...students, ...teachers], [students, teachers]);

	const router = useRouter();

	return (
		<>
			<div className="flex flex-col gap-4">
				<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>
				<h2 className="text-2xl font-semibold">Master Statistical</h2>
			</div>
			<MasterStatistical users={teachersAndStudents} corporateUsers={groupedByNameCorporateIds} displaySelection={false} />
		</>
	);
};

export default MasterStatisticalPage;