import DangerButton from "@/components/button/DangerButton";
import SecondaryButton from "@/components/button/SecondaryButton";
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
import { useDeletePerson } from "@/hooks/PersonHooks";
import { Person } from "@/interface/Person";
import { useTimedModal } from "@/providers/TimedModalProvider";
import { useEffect } from "react";


export default function DeletePersonModal({
	display,
	close,
	raidGroupId,
	person
}:{
	display: boolean;
	close: () => void;
	raidGroupId: string;
	person?: Person;
}){
	const deletePersonMutate = useDeletePerson();
	const { addSuccessMessage, addErrorMessage } = useTimedModal();


	const deletePerson = () => {
		deletePersonMutate.mutate({raidGroupId, personId: person?.personId ?? ""});
	}

	useEffect(() => {
		if(deletePersonMutate.status === "success"){
			deletePersonMutate.reset();
			addSuccessMessage(`Person ${person?.personName} deleted`);
			close();
		}
		else if(deletePersonMutate.status === "error"){
			deletePersonMutate.reset();
			addErrorMessage(`Error deleting person ${person?.personName}: ${deletePersonMutate.error.message}`);
			console.log(deletePersonMutate.error);
		}
	});


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