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

interface Props {
	groupedByNameCorporates: Record<string, CorporateUser[]>;
}

const MasterStatisticalPage = ({ groupedByNameCorporates }: Props) => {
	const {users} = useUsers();

	const router = useRouter();

	const groupedByNameCorporateIds = useMemo(
		() =>
			Object.keys(groupedByNameCorporates).reduce((accm, x) => {
				const corporateUserIds = (groupedByNameCorporates[x] as CorporateUser[]).map((y) => y.id);
				return {...accm, [x]: corporateUserIds};
			}, {}),
		[groupedByNameCorporates],
	);

	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={users} corporateUsers={groupedByNameCorporateIds} />
		</>
	);
};

export default MasterStatisticalPage;