RaidBuilderWeb/src/ui/gameClass/modals/GameClassModal.tsx

import PrimaryButton from "@/components/button/PrimaryButton";
import SecondaryButton from "@/components/button/SecondaryButton";
import IconInput from "@/components/input/IconInput";
import TextInput from "@/components/input/TextInput";
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
import { useCreateGameClass, useUpdateGameClass } from "@/hooks/GameClassHooks";
import { GameClass } from "@/interface/GameClass";
import { useTimedModal } from "@/providers/TimedModalProvider";
import { useEffect, useState } from "react";


export default function GameClassModal({
	display,
	close,
	gameId,
	gameClass
}:{
	display: boolean;
	close: () => void;
	gameId: string;
	gameClass?: GameClass | null;
}){
	const [ gameClassName, setGameClassName ] = useState(gameClass?.gameClassName ?? "");
	const [ gameClassIcon, setGameClassIcon ] = useState(gameClass?.gameClassIcon);
	const [ iconFile, setIconFile ] = useState<File | null>(null);
	const modalId = crypto.randomUUID().replaceAll("-", "");


	useEffect(() => {
		//TODO: Fix this warning
		// eslint-disable-next-line react-hooks/set-state-in-effect
		setGameClassName(gameClass?.gameClassName ?? "");
		setGameClassIcon(gameClass?.gameClassIcon);
		setIconFile(null);
	}, [ display, gameClass, setGameClassName, setGameClassIcon, setIconFile ]);


	const updateGameClassMutate = useUpdateGameClass();
	const createGameClassMutate = useCreateGameClass();
	const { addSuccessMessage, addErrorMessage } = useTimedModal();


	useEffect(() => {
		if(updateGameClassMutate.status === "success"){
			updateGameClassMutate.reset();
			addSuccessMessage(`Updated game class ${gameClassName}`);
			close();
		}
		else if(updateGameClassMutate.status === "error"){
			updateGameClassMutate.reset();
			addErrorMessage(`Error updating game class ${gameClassName}: ${updateGameClassMutate.error.message}`);
			console.log(updateGameClassMutate.error);
		}
		else if(createGameClassMutate.status === "success"){
			createGameClassMutate.reset();
			addSuccessMessage(`Deleted game class ${gameClassName}`);
			close();
		}
		else if(createGameClassMutate.status === "error"){
			createGameClassMutate.reset();
			addErrorMessage(`Error deleting game class ${gameClassName}: ${createGameClassMutate.error.message}`);
			console.log(createGameClassMutate.error);
		}
	}, [ updateGameClassMutate, createGameClassMutate, gameClassName, close, addSuccessMessage, addErrorMessage ]);


	const createGameClass = () => {
		if(!gameClassName || gameClassName.trim().length <= 0){
			addErrorMessage("Game class name is required");
			return;
		}
		else if(iconFile && !iconFile.type.startsWith("image/")){
			addErrorMessage("Error creating game class: Icon must be an image");
		}
		else if(iconFile && iconFile.size > 10485760){
			addErrorMessage("Error creating game class: Icon must be less than 10MB");
		}
		createGameClassMutate.mutate({ gameId, gameClassName, iconFile});
	}

	const updateGameClass = () => {
		if(!gameClass?.gameClassId || gameClass.gameClassId.trim().length <= 0){
			addErrorMessage("Error updating game class: Game class ID not found");
			return;
		}
		else if(!gameClassName || gameClassName.trim().length <= 0){
			addErrorMessage("Game class name is required");
			return;
		}
		else if(iconFile && !iconFile.type.startsWith("image/")){
			addErrorMessage("Error creating game class: Icon must be an image");
		}
		else if(iconFile && iconFile.size > 10485760){
			addErrorMessage("Error creating game class: Icon must be less than 10MB");
		}
		updateGameClassMutate.mutate({ gameClass: {gameClassId: gameClass?.gameClassId, gameId, gameClassName, gameClassIcon}, iconFile});
	}


	return (
		<RaidBuilderModal
			display={display}
			close={close}
			modalHeader={gameClass ? "Update Game Class" : "Create Game Class"}
			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={`gameClassModalGameClassName${modalId}`}
							placeholder="Game Class Name"
							value={gameClassName}
							onChange={(e) => setGameClassName(e.target.value)}
						/>
					</div>
					<IconInput
						file={iconFile}
						setFile={(file) => {setIconFile(file); setGameClassIcon(undefined);}}
						addErrorMessage={addErrorMessage}
					/>
				</div>
			}
			modalFooter={
				<>
					<PrimaryButton
						onClick={gameClass ? updateGameClass : createGameClass}
					>
						{gameClass ? "Update" : "Create"}
					</PrimaryButton>
					<SecondaryButton
						onClick={close}
					>
						Cancel
					</SecondaryButton>
				</>
			}
		/>
	);
}