import { User } from "@/interfaces/user";
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import clsx from "clsx";
import CodeList from "./CodeList";
import DiscountList from "./DiscountList";
import ExamList from "./ExamList";
import PackageList from "./PackageList";
import UserList from "./UserList";
import { checkAccess } from "@/utils/permissions";
import { PermissionType } from "@/interfaces/permissions";
import { EntityWithRoles } from "@/interfaces/entity";
import { useAllowedEntities, useAllowedEntitiesSomePermissions } from "@/hooks/useEntityPermissions";
import { useMemo } from "react";

interface Props {
	user: User;
	entities: EntityWithRoles[]
	permissions: PermissionType[];
}

export default function Lists({ user, entities = [], permissions }: Props) {
	const entitiesViewCodes = useAllowedEntities(user, entities, 'view_code_list')
	const entitiesDeleteCodes = useAllowedEntities(user, entities, 'delete_code')
	const entitiesViewExams = useAllowedEntitiesSomePermissions(user, entities, [
		'view_reading', 'view_listening', 'view_writing', 'view_speaking', 'view_level'
	])

	const canViewExams = useMemo(() => entitiesViewExams.length > 0, [entitiesViewExams])

	return (
		<TabGroup>
			<TabList 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>
				{canViewExams && (
					<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>
				)}
				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && entitiesViewCodes.length > 0 && (
					<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",
							)
						}>
						Code List
					</Tab>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<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",
							)
						}>
						Package List
					</Tab>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<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",
							)
						}>
						Discount List
					</Tab>
				)}
			</TabList>
			<TabPanels className="mt-2">
				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
					<UserList user={user} />
				</TabPanel>
				{canViewExams && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<ExamList user={user} entities={entities} />
					</TabPanel>
				)}
				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && entitiesViewCodes.length > 0 && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<CodeList user={user} entities={entitiesViewCodes} canDeleteCodes={entitiesDeleteCodes.length > 0} />
					</TabPanel>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<PackageList user={user} />
					</TabPanel>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<DiscountList user={user} />
					</TabPanel>
				)}
			</TabPanels>
		</TabGroup>
	);
}