import PrimaryButton from "@/components/button/PrimaryButton";
import TextInput from "@/components/input/TextInput";
import Pagination from "@/components/pagination/Pagination";
import { useGetPeopleByRaidGroupCount } from "@/hooks/PersonHooks";
import { RaidGroup } from "@/interface/RaidGroup";
import { useAuth } from "@/providers/AuthProvider";
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
import { useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import PersonModal from "./modals/PersonModal";
import PersonLoader from "./PersonLoader";


export default function PersonTab({
	raidGroup
}:{
	raidGroup: RaidGroup;
}){
	const { accountPermissions, raidGroupPermissions } = useAuth();
	const [ displayCreatePersonModal, setDisplayCreatePersonModal ] = useState(false);
	const [ page, setPage ] = useState(1);
	const [ totalPages, setTotalPages ] = useState(1);
	const [ searchTerm, setSearchTerm ] = useState("");
	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
	const pageSize = 10;
	const modalId = crypto.randomUUID().replaceAll("-", "");


	const personCountQuery = useGetPeopleByRaidGroupCount(raidGroup?.raidGroupId ?? "", sentSearchTerm);


	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
		setSentSearchTerm(newSearchTerm);
	}, 1000);


	useEffect(() => {
		updateSearchTerm(searchTerm ?? "");
	}, [ searchTerm, updateSearchTerm ]);


	useEffect(() => {
		if(personCountQuery.status === "success"){
			//TODO: Fix this warning
			// eslint-disable-next-line react-hooks/set-state-in-effect
			setTotalPages(Math.ceil(personCountQuery.data / pageSize));
		}
	}, [ personCountQuery ]);


	return (
		<>
			<div
				className="flex flex-row items-center justify-center w-full mb-8"
			>
				<div
					className="flex flex-row items-center justify-center w-full"
				>
					&nbsp;
				</div>
				{/* Add Person Button */}
				<div
					className="flex flex-row items-center justify-center w-full"
				>
					<PrimaryButton
						className="text-nowrap"
						onClick={() => setDisplayCreatePersonModal(true)}
						disabled={!isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
					>
						Create Person
					</PrimaryButton>
					<PersonModal
						display={displayCreatePersonModal}
						close={() => setDisplayCreatePersonModal(false)}
						person={undefined}
						raidGroupId={raidGroup.raidGroupId ?? ""}
					/>
				</div>
				{/* Person Search Box */}
				<div
					className="flex flex-row items-center justify-end w-full"
				>
					<div>
						<TextInput
							id={`personSearchBox${modalId}`}
							value={searchTerm}
							onChange={(e) => setSearchTerm(e.target.value)}
							placeholder="Search"
						/>
					</div>
				</div>
			</div>
			{ /* Person List */}
			<PersonLoader
				raidGroup={raidGroup}
				page={page}
				pageSize={pageSize}
				searchTerm={sentSearchTerm}
			/>
			{/* Pagination */}
			<div
				className="my-12"
			>
				<Pagination
					currentPage={page}
					totalPages={totalPages}
					onChange={setPage}
				/>
			</div>
		</>
	);
}