RaidBuilderWeb/src/ui/raidGroup/modals/RaidGroupModal.tsx

import PrimaryButton from "@/components/button/PrimaryButton";
import SecondaryButton from "@/components/button/SecondaryButton";
import GameSelector from "@/components/game/GameSelector";
import IconInput from "@/components/input/IconInput";
import TextInput from "@/components/input/TextInput";
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
import { useGetGame } from "@/hooks/GameHooks";
import { useCreateRaidGroup, useUpdateRaidGroup } from "@/hooks/RaidGroupHooks";
import { Game } from "@/interface/Game";
import { RaidGroup } from "@/interface/RaidGroup";
import { useTimedModal } from "@/providers/TimedModalProvider";
import { useEffect, useState } from "react";


export default function RaidGroupModal({
	display,
	close,
	raidGroup
}:{
	display: boolean;
	close: () => void;
	raidGroup?: RaidGroup;
}){
	const [ raidGroupName, setRaidGroupName ] = useState(raidGroup?.raidGroupName);
	const [ raidGroupIcon, setRaidGroupIcon ] = useState(raidGroup?.raidGroupIcon);
	const [ iconFile, setIconFile ] = useState<File | null>(null);
	const [ game, setGame ] = useState<Game>();
	const modalId = crypto.randomUUID().replaceAll("-", "");


	useEffect(() => {
		setRaidGroupName(raidGroup?.raidGroupName ?? "");
		setRaidGroupIcon(raidGroup?.raidGroupIcon ?? "");
		setGame(undefined);
		setIconFile(null);
	}, [ display, raidGroup, setRaidGroupName, setRaidGroupIcon ]);


	const updateRaidGroupMutate = useUpdateRaidGroup();
	const createRaidGroupMutate = useCreateRaidGroup();
	const { addSuccessMessage, addErrorMessage } = useTimedModal();
	const gameQuery = useGetGame(raidGroup?.gameId ?? "", raidGroup === undefined);
	if(gameQuery.status === "success" && !game){
		setGame(gameQuery.data);
	}


	useEffect(() => {
		if(updateRaidGroupMutate.status === "success"){
			updateRaidGroupMutate.reset();
			addSuccessMessage(`Updated raid group ${raidGroup?.raidGroupName}`);
			close();
		}
		else if(updateRaidGroupMutate.status === "error"){
			updateRaidGroupMutate.reset();
			addErrorMessage(`Error updating raid group ${raidGroup?.raidGroupName}: ${updateRaidGroupMutate.error.message}`);
			console.log(updateRaidGroupMutate.error);
		}
		else if(createRaidGroupMutate.status === "success"){
			createRaidGroupMutate.reset();
			addSuccessMessage(`Created raid group ${raidGroup?.raidGroupName}`);
			close();
		}
		else if(createRaidGroupMutate.status === "error"){
			createRaidGroupMutate.reset();
			addErrorMessage(`Error creating raid group ${raidGroup?.raidGroupName}: ${createRaidGroupMutate.error.message}`);
			console.log(createRaidGroupMutate.error);
		}
	}, [ updateRaidGroupMutate, createRaidGroupMutate, raidGroup, close, addSuccessMessage, addErrorMessage ]);


	const updateRaidGroup = () => {
		if(!raidGroup?.raidGroupId || raidGroup.raidGroupId.trim().length <= 0){
			addErrorMessage("Raid group ID not found");
			return;
		}
		else if(!raidGroupName || raidGroupName.trim().length <= 0){
			addErrorMessage("Raid group name is required");
			return;
		}
		else if(!game){
			addErrorMessage("Game is required");
			return;
		}
		updateRaidGroupMutate.mutate({raidGroup: {raidGroupId: raidGroup?.raidGroupId, raidGroupName, gameId: game?.gameId, raidGroupIcon} as RaidGroup, iconFile});
	}

	const createRaidGroup = () => {
		if(!raidGroupName || raidGroupName.trim().length <= 0){
			addErrorMessage("Raid group name is required");
			return;
		}
		else if(!game){
			addErrorMessage("Game is required");
			return;
		}
		createRaidGroupMutate.mutate({raidGroupName: raidGroupName ?? "", gameId: game?.gameId ?? "", iconFile});
	}


	return (
		<RaidBuilderModal
			display={display}
			close={close}
			modalHeader={raidGroup ? "Update Raid Group" : "Create Raid Group"}
			modalBody={
				<div
					className="flex flex-col items-center justify-center gap-4"
				>
					<div
						className="flex flex-row items-center justify-center w-full px-4.5"
					>
						<TextInput
							id={`raidGroupModalRaidGroupName${modalId}`}
							placeholder="Raid Group Name"
							value={raidGroupName}
							onChange={(e) => setRaidGroupName(e.target.value)}
						/>
					</div>
					<div
						className="w-full px-4.5"
					>
						<GameSelector
							game={game}
							onChange={setGame}
							disabled={!!raidGroup}
						/>
					</div>
					<IconInput
						file={iconFile}
						setFile={(file) => {setIconFile(file); setRaidGroupIcon(undefined);}}
						addErrorMessage={addErrorMessage}
					/>
				</div>
			}
			modalFooter={
				<>
					<PrimaryButton
						onClick={raidGroup ? updateRaidGroup : createRaidGroup}
					>
						{raidGroup ? "Update" : "Create"}
					</PrimaryButton>
					<SecondaryButton
						onClick={close}
					>
						Cancel
					</SecondaryButton>
				</>
			}
		/>
	);
}