var-monorepo/apps/hub/app/(app)/events/_components/modalBtn.tsx

"use client";
import { useEffect } from "react";
import {
	CheckCircledIcon,
	CalendarIcon,
	EnterIcon,
} from "@radix-ui/react-icons";
import { Event, EventAppointment, Participant, prisma, User } from "@repo/db";
import { cn } from "../../../../helper/cn";
import { inscribeToMoodleCourse, upsertParticipant } from "../actions";
import { Check, Clock10Icon, Cross, EyeIcon } from "lucide-react";
import { useForm } from "react-hook-form";
import {
	EventAppointmentOptionalDefaults,
	EventAppointmentSchema,
	ParticipantOptionalDefaults,
	ParticipantOptionalDefaultsSchema,
	ParticipantSchema,
} from "@repo/db/zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Select } from "../../../_components/ui/Select";
import toast from "react-hot-toast";
import { useRouter } from "next/navigation";
import { JsonArray } from "../../../../../../packages/database/generated/client/runtime/library";
import { eventCompleted } from "@repo/ui";

interface ModalBtnProps {
	title: string;
	event: Event;
	dates: EventAppointment[];
	selectedAppointments: EventAppointment[];
	participant?: Participant;
	user: User;
	modalId: string;
}

const ModalBtn = ({
	title,
	dates,
	modalId,
	participant,
	selectedAppointments,
	event,
	user,
}: ModalBtnProps) => {
	useEffect(() => {
		const modal = document.getElementById(modalId) as HTMLDialogElement;
		const handleOpen = () => {
			document.body.classList.add("modal-open");
		};
		const handleClose = () => {
			document.body.classList.remove("modal-open");
		};
		modal?.addEventListener("show", handleOpen);
		modal?.addEventListener("close", handleClose);
		return () => {
			modal?.removeEventListener("show", handleOpen);
			modal?.removeEventListener("close", handleClose);
		};
	}, [modalId]);
	const router = useRouter();

	const canSelectDate =
		event.hasPresenceEvents &&
		!participant?.attended &&
		(selectedAppointments.length === 0 || participant?.appointmentCancelled);

	const openModal = () => {
		const modal = document.getElementById(modalId) as HTMLDialogElement;
		document.body.classList.add("modal-open");
		modal?.showModal();
	};

	const closeModal = () => {
		const modal = document.getElementById(modalId) as HTMLDialogElement;
		document.body.classList.remove("modal-open");
		modal?.close();
	};
	const selectAppointmentForm = useForm<ParticipantOptionalDefaults>({
		resolver: zodResolver(ParticipantOptionalDefaultsSchema),
		defaultValues: {
			eventId: event.id,
			userId: user.id,
			...participant,
		},
	});
	const selectedAppointment = selectedAppointments[0];
	return (
		<>
			<button
				className={cn(
					"btn btn-outline btn-info btn-wide",
					event.type === "OBLIGATED_COURSE" && "btn-secondary",
					eventCompleted(event, participant) && "btn-success",
				)}
				onClick={openModal}
			>
				{participant && !eventCompleted(event, participant) && (
					<>
						<EyeIcon /> Anzeigen
					</>
				)}
				{!participant && (
					<>
						<EnterIcon /> Anmelden
					</>
				)}
				{eventCompleted(event, participant) && (
					<>
						<Check /> Abgeschlossen
					</>
				)}
			</button>
			<dialog id={modalId} className="modal">
				<div className="modal-box">
					<h3 className="font-bold text-lg">{title}</h3>
					{event.hasPresenceEvents && (
						<div>
							{canSelectDate && (
								<div className="flex items-center gap-2 justify-center">
									<CalendarIcon />
									{!!dates.length && (
										// TODO: Prevent users from selecting an appointment that is full
										<Select
											form={selectAppointmentForm as any}
											options={dates.map((date) => ({
												label: new Date(date.appointmentDate).toLocaleString(),
												value: date.id,
											}))}
											name="eventAppointmentId"
											label={""}
											className="min-w-[200px]"
										/>
									)}
									{!dates.length && (
										<p className="text-center text-info">
											Keine Termine verfügbar
										</p>
									)}
								</div>
							)}
							{!canSelectDate && participant?.attended && (
								<p className="py-4 flex items-center gap-2 justify-center">
									<CheckCircledIcon className="text-success" />
									Du hast an dem Presenztermin teilgenommen
								</p>
							)}
							{selectedAppointment && !participant?.appointmentCancelled && (
								<>
									<div className="flex items-center gap-2 justify-center">
										<p>Dein Ausgewähler Termin</p>

										<p>
											{new Date(
												selectedAppointment.appointmentDate,
											).toLocaleString()}
										</p>
										<button
											onClick={async () => {
												await upsertParticipant({
													eventId: event.id,
													userId: participant!.userId,
													appointmentCancelled: true,
													statusLog: [
														...(participant?.statusLog as any),
														{
															data: {
																appointmentId: selectedAppointment.id,
																appointmentDate:
																	selectedAppointment.appointmentDate,
															},
															event: "Termin abgesagt",
															timestamp: new Date(),
														},
													],
												});
												toast.success("Termin abgesagt");
												router.refresh();
											}}
											className="btn btn-error btn-outline btn-sm"
										>
											absagen
										</button>
									</div>
									<p className="mt-3 text-center">
										Bitte finde dich an diesem Termin in unserem Discord ein.
									</p>
								</>
							)}
						</div>
					)}
					{event.finisherMoodleCourseId && (
						<MoodleCourseIndicator
							participant={participant}
							user={user}
							moodleCourseId={event.finisherMoodleCourseId}
							completed={participant?.finisherMoodleCurseCompleted || false}
							event={event}
						/>
					)}
					<div className="modal-action flex justify-between">
						<button className="btn" onClick={closeModal}>
							Abbrechen
						</button>
						{!!canSelectDate && (
							<button
								className={cn(
									"btn btn-info btn-outline btn-wide",
									event.type === "OBLIGATED_COURSE" && "btn-secondary",
								)}
								onClick={async () => {
									console.log("submit", selectAppointmentForm.formState.errors);
									const data = selectAppointmentForm.getValues();
									if (!data.eventAppointmentId) return;

									console.log("submit", data);
									await upsertParticipant({
										...data,
										statusLog: data.statusLog?.filter((log) => log !== null),
										appointmentCancelled: false,
									});
									router.refresh();
									closeModal();
								}}
							>
								<EnterIcon /> Anmelden
							</button>
						)}
					</div>
				</div>
				<button className="modal-backdrop" onClick={closeModal}>
					Abbrechen
				</button>
			</dialog>
		</>
	);
};

export default ModalBtn;

const MoodleCourseIndicator = ({
	completed,
	moodleCourseId,
	event,
	participant,
	user,
}: {
	user: User;
	participant?: Participant;
	completed?: boolean;
	moodleCourseId: string;
	event: Event;
}) => {
	const courseUrl = `${process.env.NEXT_PUBLIC_MOODLE_URL}/course/view.php?id=${moodleCourseId}`;
	if (event.hasPresenceEvents && !participant?.attended)
		return (
			<p className="py-4 flex items-center gap-2 justify-center">
				<Clock10Icon className="text-error" />
				Abschlusstest erst nach Teilnahme verfügbar
			</p>
		);
	if (completed)
		return (
			<p className="py-4 flex items-center gap-2 justify-center">
				<CheckCircledIcon className="text-success" />
				Moodle Kurs abgeschlossen
			</p>
		);
	return (
		<p className="py-4 flex items-center gap-2 justify-center">
			Moodle-Kurs Benötigt
			<button
				className="btn btn-xs btn-info ml-2"
				onClick={async () => {
					await upsertParticipant({
						eventId: event.id,
						userId: user.id,
						finisherMoodleCurseCompleted: false,
					});

					if (user.moodleId) {
						await inscribeToMoodleCourse(moodleCourseId, user.moodleId);
					}
					window.open(courseUrl, "_blank");
				}}
			>
				Zum Moodle Kurs
			</button>
		</p>
	);
};