import {User} from "@/interfaces/user";
import {Tab} from "@headlessui/react";
import clsx from "clsx";
import ExamList from "./ExamList";
import GroupList from "./GroupList";
import UserList from "./UserList";

export default function Lists({user}: {user: User}) {
	return (
		<Tab.Group>
			<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
				<Tab
					className={({selected}) =>
						clsx(
							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
							"transition duration-300 ease-in-out",
							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
						)
					}>
					User List
				</Tab>
				{user?.type === "developer" && (
					<Tab
						className={({selected}) =>
							clsx(
								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
								"transition duration-300 ease-in-out",
								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
							)
						}>
						Exam List
					</Tab>
				)}
				<Tab
					className={({selected}) =>
						clsx(
							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
							"transition duration-300 ease-in-out",
							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
						)
					}>
					Group List
				</Tab>
			</Tab.List>
			<Tab.Panels className="mt-2">
				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
					<UserList user={user} />
				</Tab.Panel>
				{user?.type === "developer" && (
					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<ExamList user={user} />
					</Tab.Panel>
				)}
				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
					<GroupList user={user} />
				</Tab.Panel>
			</Tab.Panels>
		</Tab.Group>
	);
}