import React, {useMemo} from "react";
import useUsers, { userHashStudent, userHashTeacher, userHashCorporate } from "@/hooks/useUsers";
import useGroups from "@/hooks/useGroups";
import {User} from "@/interfaces/user";
import Select from "@/components/Low/Select";
import ProgressBar from "@/components/Low/ProgressBar";
import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import {capitalize} from "lodash";
import {getLevelLabel} from "@/utils/score";

const Card = ({user}: {user: User}) => {
	return (
		<div className="border-mti-gray-platinum flex flex-col h-fit w-full cursor-pointer gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
			<div className="flex flex-col gap-3">
				<h3 className="text-xl font-semibold">{user.name}</h3>
			</div>
			<div className="flex w-full gap-3 flex-wrap">
				{MODULE_ARRAY.map((module) => {
					const desiredLevel = user.desiredLevels[module] || 9;
					const level = user.levels[module] || 0;
					return (
						<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4 min-w-[250px]" key={module}>
							<div className="flex items-center gap-2 md:gap-3">
								<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
									{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
									{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
									{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
									{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
									{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
								</div>
								<div className="flex w-full flex-col">
									<span className="text-sm font-bold md:font-extrabold w-full">{capitalize(module)}</span>
									<div className="text-mti-gray-dim text-sm font-normal">
										{module === "level" && <span>English Level: {getLevelLabel(level).join(" / ")}</span>}
										{module !== "level" && (
											<div className="flex flex-col">
												<span>Level {level} / Level 9</span>
												<span>Desired Level: {desiredLevel}</span>
											</div>
										)}
									</div>
								</div>
							</div>
							<div className="md:pl-14">
								<ProgressBar
									color={module}
									label=""
									mark={Math.round((desiredLevel * 100) / 9)}
									markLabel={`Desired Level: ${desiredLevel}`}
									percentage={Math.round((level * 100) / 9)}
									className="h-2 w-full"
								/>
							</div>
						</div>
					);
				})}
			</div>
		</div>
	);
};

const CorporateStudentsLevels = () => {
	const [corporateId, setCorporateId] = React.useState<string>("");

	const {users: students} = useUsers(userHashStudent);
	const {users: corporates} = useUsers(userHashCorporate);

	const corporate = useMemo(() => corporates.find((u) => u.id === corporateId) || corporates[0], [corporates, corporateId]);

	return (
		<>
			<Select
				options={corporates.map((x: User) => ({
					value: x.id,
					label: `${x.name} - ${x.email}`,
				}))}
				value={corporate ? {value: corporate.id, label: corporate.name} : null}
				onChange={(value) => setCorporateId(value?.value!)}
				styles={{
					menuPortal: (base) => ({...base, zIndex: 9999}),
					option: (styles, state) => ({
						...styles,
						backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
						color: state.isFocused ? "black" : styles.color,
					}),
				}}
			/>
			{students.map((u) => (
				<Card user={u} key={u.id} />
			))}
		</>
	);
};

export default CorporateStudentsLevels;