import PrimaryButton from "@/components/button/PrimaryButton";
import SecondaryButton from "@/components/button/SecondaryButton";
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
import RaidGroupPermissionSelector from "@/components/raidGroup/RaidGroupPermissionSelector";
import { useGetRaidGroupPermissionsForAccount, useUpdateRaidGroupPermissionsForAccount } from "@/hooks/AccountHooks";
import { Account } from "@/interface/Account";
import { RaidGroup, RaidGroupPermissionType } from "@/interface/RaidGroup";
import { useTimedModal } from "@/providers/TimedModalProvider";
import { useEffect, useState } from "react";


export default function AccountRaidGroupPermissionsModal({
	display,
	close,
	account,
	raidGroup
}:{
	display: boolean;
	close: () => void;
	account?: Account;
	raidGroup?: RaidGroup;
}){
	const [ currentPermission, setCurrentPermission ] = useState<RaidGroupPermissionType>();


	const raidGroupPermissionsQuery = useGetRaidGroupPermissionsForAccount(raidGroup?.raidGroupId, account?.accountId);
	const raidGroupPermissionsMutate = useUpdateRaidGroupPermissionsForAccount(raidGroup?.raidGroupId, account?.accountId);
	const { addSuccessMessage, addErrorMessage } = useTimedModal();

	useEffect(() => {
		if(raidGroupPermissionsQuery.status === "success"){
			//TODO: Fix this warning
			// eslint-disable-next-line react-hooks/set-state-in-effect
			setCurrentPermission(raidGroupPermissionsQuery.data);
		}
		else if(raidGroupPermissionsQuery.status === "error"){
			addErrorMessage(`Error getting raid group permissions: ${raidGroupPermissionsQuery.error.message}`);
		}
	}, [raidGroupPermissionsQuery.status, raidGroupPermissionsQuery.data, addSuccessMessage, addErrorMessage, raidGroupPermissionsQuery.error?.message]);

	useEffect(() => {
		if(raidGroupPermissionsMutate.status === "success"){
			raidGroupPermissionsMutate.reset();
			close();
			addSuccessMessage("Permissions updated successfully");
		}
		else if(raidGroupPermissionsMutate.status === "error"){
			raidGroupPermissionsMutate.reset();
			addErrorMessage(`Error updating raid group permissions: ${raidGroupPermissionsMutate.error.message}`);
		}
	}, [ close, raidGroupPermissionsMutate, raidGroupPermissionsMutate.status, addErrorMessage, addSuccessMessage ]);


	const updateRaidGroupPermissions = () => {
		if(!raidGroup?.raidGroupId || !account?.accountId){
			addErrorMessage("Error updating raid group permissions: Raid group and account are required");
			return;
		}
		if(!currentPermission){
			addErrorMessage("Error updating raid group permissions: Permission is required");
			return;
		}


		raidGroupPermissionsMutate.mutate(currentPermission ?? RaidGroupPermissionType.RAIDER);
	}


	return (
		<RaidBuilderModal
			display={display}
			close={close}
			modalHeader={`Raid Group Permissions for ${account?.username}`}
			modalBody={
				<div
					className="flex flex-col items-center justify-center gap-4"
				>
					<RaidGroupPermissionSelector
						value={currentPermission}
						onChange={(e) => setCurrentPermission(e.target.value as RaidGroupPermissionType)}
					/>
				</div>
			}
			modalFooter={
				<>
					<PrimaryButton
						onClick={updateRaidGroupPermissions}
					>
						Update
					</PrimaryButton>
						<SecondaryButton
						onClick={close}
					>
						Cancel
					</SecondaryButton>
				</>
			}
		/>
	);
}