import DangerButton from "@/components/button/DangerButton";
import SecondaryButton from "@/components/button/SecondaryButton";
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
import { useDeleteRaidGroup } from "@/hooks/RaidGroupHooks";
import { RaidGroup } from "@/interface/RaidGroup";
import { useTimedModal } from "@/providers/TimedModalProvider";
import { useEffect } from "react";


export default function DeleteRaidGroupModal({
	display,
	close,
	raidGroup
}:{
	display: boolean;
	close: () => void;
	raidGroup: RaidGroup | undefined;
}){
	const deleteRaidGroupMutate = useDeleteRaidGroup();
	const { addSuccessMessage, addErrorMessage } = useTimedModal();


	const deleteGame = () => {
		deleteRaidGroupMutate.mutate(raidGroup?.raidGroupId ?? "");
	}

	useEffect(() => {
		if(deleteRaidGroupMutate.status === "success"){
			deleteRaidGroupMutate.reset();
			addSuccessMessage(`Successfully delete ${raidGroup?.raidGroupName}`);
			close();
		}
		else if(deleteRaidGroupMutate.status === "error"){
			deleteRaidGroupMutate.reset();
			addErrorMessage(`Error deleting game ${raidGroup?.raidGroupName}: ${deleteRaidGroupMutate.error.message}`);
			console.log(deleteRaidGroupMutate.error);
		}
	});


	return (
		<RaidBuilderModal
			display={display}
			close={close}
			modalHeader={`Delete ${raidGroup?.raidGroupName}`}
			modalBody={`Are you sure you want to delete ${raidGroup?.raidGroupName}`}
			modalFooter={
				<>
					<DangerButton
						onClick={deleteGame}
					>
						Delete
					</DangerButton>
					<SecondaryButton
						onClick={close}
					>
						Cancel
					</SecondaryButton>
				</>
			}
		/>
	);
}