RaidBuilderWeb/src/ui/person/modals/PersonModal.tsx

import PrimaryButton from "@/components/button/PrimaryButton";
import SecondaryButton from "@/components/button/SecondaryButton";
import TextInput from "@/components/input/TextInput";
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
import { useCreatePerson, useUpdatePerson } from "@/hooks/PersonHooks";
import { Person } from "@/interface/Person";
import { useTimedModal } from "@/providers/TimedModalProvider";
import { useEffect, useState } from "react";


export default function PersonModal({
	display,
	close,
	person,
	raidGroupId
}:{
	display: boolean;
	close: () => void;
	person: Person | undefined;
	raidGroupId: string;
}){
	const [ personName, setPersonName ] = useState<string>(person?.personName ?? "");
	const [ discordId, setDiscordId ] = useState<string>(person?.discordId ?? "");
	const modalId = crypto.randomUUID().replaceAll("-", "");


	useEffect(() => {
		//TODO: Fix this warning
		// eslint-disable-next-line react-hooks/set-state-in-effect
		setPersonName(person?.personName ?? "");
		setDiscordId(person?.discordId ?? "");
	}, [ display, person, raidGroupId, setPersonName, setDiscordId ]);


	const createPersonMutate = useCreatePerson();
	const updatePersonMutate = useUpdatePerson();
	const { addSuccessMessage, addErrorMessage } = useTimedModal();


	useEffect(() => {
		if(createPersonMutate.status === "success"){
			createPersonMutate.reset();
			addSuccessMessage("Person created successfully");
			close();
		}
		else if(updatePersonMutate.status === "success"){
			updatePersonMutate.reset();
			addSuccessMessage("Person updated successfully");
			close();
		}
		else if(createPersonMutate.status === "error"){
			createPersonMutate.reset();
			addErrorMessage(`Error creating person ${personName}: ${createPersonMutate.error.message}`);
			console.log(createPersonMutate.error);
		}
		else if(updatePersonMutate.status === "error"){
			updatePersonMutate.reset();
			addErrorMessage(`Error updating person ${personName}: ${updatePersonMutate.error.message}`);
			console.log(updatePersonMutate.error);
		}
	});


	const createPerson = () => {
		if(!personName || personName.trim().length <= 0){
			addErrorMessage("Person name is required");
			return;
		}
		else if(!raidGroupId || raidGroupId.trim().length <= 0){
			addErrorMessage("Raid group ID is required");
			return;
		}
		else if(discordId && discordId.trim().length <= 0){
			addErrorMessage("Discord ID must be a valid length");
			return;
		}
		createPersonMutate.mutate({raidGroupId, personName, discordId} as Person);
	}

	const updatePerson = () => {
		if(!person?.personId || person.personId.trim().length <= 0){
			addErrorMessage("Person ID not found");
			return;
		}
		else if(!personName || personName.trim().length <= 0){
			addErrorMessage("Person name is required");
			return;
		}
		else if(!raidGroupId || raidGroupId.trim().length <= 0){
			addErrorMessage("Raid group ID is required");
			return;
		}
		else if(discordId && discordId.trim().length <= 0){
			addErrorMessage("Discord ID must be a valid length");
			return;
		}
		updatePersonMutate.mutate({raidGroupId, personId: person?.personId, personName, discordId} as Person);
	}


	return (
		<RaidBuilderModal
			display={display}
			close={close}
			modalHeader={person ? "Update Person" : "Create Person"}
			modalBody={
				<div
					className="flex flex-col items-center justify-center gap-4"
				>
					<TextInput
						id={`personModalName${modalId}`}
						placeholder="Person Name"
						value={personName}
						onChange={(e) => setPersonName(e.target.value)}
					/>
					<TextInput
						id={`personModalDiscordId${modalId}`}
						placeholder="Discord ID"
						value={discordId}
						onChange={(e) => setDiscordId(e.target.value)}
					/>
				</div>
			}
			modalFooter={
				<>
					<PrimaryButton
						onClick={person ? updatePerson : createPerson}
					>
						{person ? "Update" : "Create"}
					</PrimaryButton>
					<SecondaryButton
						onClick={close}
					>
						Cancel
					</SecondaryButton>
				</>
			}
		/>
	);
}