RaidBuilderWeb/src/ui/calendar/modals/CalendarEventModal.tsx

import DangerButton from "@/components/button/DangerButton";
import PrimaryButton from "@/components/button/PrimaryButton";
import SecondaryButton from "@/components/button/SecondaryButton";
import DateInput from "@/components/input/DateInput";
import TextArea from "@/components/input/TextArea";
import TextInput from "@/components/input/TextInput";
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
import { CalendarEvent } from "@/interface/Calendar";
import { useTimedModal } from "@/providers/TimedModalProvider";
import { UseMutationResult } from "@tanstack/react-query";
import moment from "moment";
import { useEffect, useState } from "react";
import { BsTrash3 } from "react-icons/bs";


export default function CalendarEventModal({
	display,
	close,
	calendarEvent,
	disabled,
	createCalendarEventMutate,
	updateCalendarEventMutate,
	deleteCalendarEventMutate
}:{
	display: boolean;
	close: () => void;
	calendarEvent?: CalendarEvent;
	disabled?: boolean;
	createCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
	updateCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
	deleteCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
}){
	const [ eventName, setEventName ] = useState<string>(calendarEvent?.eventName ?? "");
	const [ eventDescription, setEventDescription ] = useState<string>(calendarEvent?.eventDescription ?? "");
	const [ eventStartDate, setEventStartDate ] = useState(calendarEvent?.eventStartDate ?? new Date());
	const [ eventEndDate, setEventEndDate ] = useState(calendarEvent?.eventEndDate ?? new Date());
	const { addSuccessMessage, addErrorMessage } = useTimedModal();


	const modalId = crypto.randomUUID().replaceAll("-", "");


	useEffect(() => {
		if(createCalendarEventMutate.status === "success"){
			createCalendarEventMutate.reset();
			addSuccessMessage(`Calendar Event ${eventName} created successfully`);
			close();
		}
		else if(updateCalendarEventMutate.status === "success"){
			updateCalendarEventMutate.reset();
			addSuccessMessage(`Calendar Event ${eventName} updated successfully`);
			close();
		}
		else if(deleteCalendarEventMutate.status === "success"){
			deleteCalendarEventMutate.reset();
			addSuccessMessage(`Calendar Event ${eventName} deleted successfully`);
			close();
		}
		else if(createCalendarEventMutate.status === "error"){
			createCalendarEventMutate.reset();
			addErrorMessage(`Error creating calendar event ${eventName}: ${createCalendarEventMutate.error.message}`);
			console.log(createCalendarEventMutate.error);
		}
		else if(updateCalendarEventMutate.status === "error"){
			updateCalendarEventMutate.reset();
			addErrorMessage(`Error updating calendar event ${eventName}: ${updateCalendarEventMutate.error.message}`);
			console.log(updateCalendarEventMutate.error);
		}
		else if(deleteCalendarEventMutate.status === "error"){
			deleteCalendarEventMutate.reset();
			addErrorMessage(`Error deleting calendar event ${eventName}: ${deleteCalendarEventMutate.error.message}`);
			console.log(deleteCalendarEventMutate.error);
		}
	});

	const createCalendarEvent = () => {
		createCalendarEventMutate.mutate({eventName, eventDescription, eventStartDate, eventEndDate});
	}

	const updateCalendarEvent = () => {
		updateCalendarEventMutate.mutate({calendarEventId: calendarEvent?.calendarEventId, eventName, eventDescription, eventStartDate, eventEndDate});
	}

	const deleteCalendarEvent = () => {
		deleteCalendarEventMutate.mutate(calendarEvent as CalendarEvent);
	}


	useEffect(() => {
		if(calendarEvent){
			setEventName(calendarEvent?.eventName ?? "");
			setEventDescription(calendarEvent?.eventDescription ?? "");
			setEventStartDate(calendarEvent.eventStartDate);
			setEventEndDate(calendarEvent.eventEndDate);
		}
		else{
			setEventName("");
			setEventDescription("");
			setEventStartDate(new Date());
			setEventEndDate(new Date());
		}
	}, [ calendarEvent ]);


	return (
		<RaidBuilderModal
			display={display}
			close={close}
			modalHeader={calendarEvent?.calendarEventId ? "Update Event" : "Create Event"}
			modalBody={
				<div
					className="flex flex-col items-center justify-center gap-4"
				>
					<div
						className="px-4"
					>
						<TextInput
							id={`calendarEventModalNameInput${modalId}`}
							placeholder="Event Name"
							onChange={(e) => setEventName(e.target.value)}
							value={eventName}
							disabled={disabled}
						/>
					</div>
					<TextArea
						id={`calendarEventModalDescriptionInput${modalId}`}
						placeholder="Event Description"
						onChange={(e) => setEventDescription(e.target.value)}
						value={eventDescription}
						disabled={disabled}
					/>
					<div
						className="w-full"
					>
						<DateInput
							id={`calendarEventModalStartDateInput${modalId}`}
							placeholder="Start Date"
							value={moment(eventStartDate).format("YYYY-MM-DDTHH:mm")}
							onChange={(e) => setEventStartDate(moment(e.target.value).toDate())}
							disabled={disabled}
						/>
						<DateInput
							id={`calendarEventModalEndDateInput${modalId}`}
							placeholder="End Date"
							value={moment(eventEndDate).format("YYYY-MM-DDTHH:mm")}
							onChange={(e) => setEventEndDate(moment(e.target.value).toDate())}
							disabled={disabled}
						/>
					</div>
				</div>
			}
			modalFooter={
				<div
					className="flex flex-row items-center justify-center gap-4 w-full"
				>
					<div
						className="flex flex-row items-center justify-start w-full"
					>
						&nbsp;
					</div>
					<div
						className="flex flex-row items-center justify-center w-full gap-4"
					>
						<PrimaryButton
							onClick={calendarEvent?.calendarEventId ? updateCalendarEvent : createCalendarEvent}
							disabled={disabled}
						>
							{calendarEvent?.calendarEventId ? "Update" : "Create"}
						</PrimaryButton>
						<SecondaryButton
							onClick={close}
						>
							Cancel
						</SecondaryButton>
					</div>
					<div
						className="flex flex-row items-center justify-end w-full"
					>
						{
							calendarEvent?.calendarEventId && !disabled &&
							<DangerButton
								variant="ghost"
								shape="square"
								onClick={deleteCalendarEvent}
								disabled={disabled}
							>
								<BsTrash3
									size={22}
								/>
							</DangerButton>
						}
						{
							!calendarEvent?.calendarEventId &&
							<>&nbsp;</>
						}
					</div>
				</div>
			}
		/>
	);
}