"use client";
import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons";
import { Event, Participant, EventAppointment, User } from "@repo/db";
import ModalBtn from "./modalBtn";
import MDEditor from "@uiw/react-md-editor";

export const KursItem = ({
	user,
	event,
}: {
	user: User;
	event: Event & {
		appointments: EventAppointment[];
		participants: Participant[];
	};
}) => {
	return (
		<div className="col-span-full">
			<div className="card bg-base-200 shadow-xl mb-4">
				<div className="card-body">
					<h2 className="card-title">{event.name}</h2>
					<div className="absolute top-0 right-0 m-4">
						<span className="badge badge-info badge-outline">
							Zusatzqualifikation
						</span>
					</div>
					<div className="grid grid-cols-6 gap-4">
						<div className="col-span-4">
							<div className="text-left text-balance">
								<MDEditor.Markdown
									source={event.description}
									className="whitespace-pre-wrap"
									style={{
										backgroundColor: "transparent",
									}}
								/>
							</div>
						</div>
						<div className="col-span-2">{event.finishedBadges}</div>
					</div>
					<div className="card-actions flex justify-between items-center mt-5">
						<div>
							<p className="text-gray-600 text-left flex items-center gap-2">
								<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
								{(!event.starterMoodleCourseId ||
									!event.requiredBadges.length) &&
									"Keine"}
								{event.starterMoodleCourseId && (
									<a className="link link-info" href="">
										Moodle Kurs {event.starterMoodleCourseId}
									</a>
								)}
							</p>
							{!!event.requiredBadges.length && (
								<div className="flex ml-6">
									<b className="text-gray-600 text-left">Abzeichen:</b>
									<div className="flex gap-2">
										{event.requiredBadges.map((badge) => (
											<div className="badge badge-secondary badge-outline">
												{badge}
											</div>
										))}
									</div>
								</div>
							)}
						</div>
						<ModalBtn
							user={user}
							event={event}
							title={event.name}
							dates={event.appointments}
							modalId={`${event.name}_modal.${event.id}`}
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

export const ObligatedEvent = ({
	event,
	user,
}: {
	event: Event;
	user: User;
}) => {
	{
		/* STATISCH, DA FÜR ALLE NEUEN MITGLIEDER MANDATORY, WIRD AUSGEBLENDET WENN ABSOLVIERT */
	}
	return (
		<div className="col-span-full">
			<div className="card card-bordered border-secondary bg-base-200 shadow-xl mb-4">
				<div className="card-body">
					<h2 className="card-title">Einsteigerkurs für Piloten</h2>
					<div className="absolute top-0 right-0 m-4">
						<span className="badge badge-secondary badge-outline">
							Verpflichtend
						</span>
					</div>
					<div className="grid grid-cols-6 gap-4">
						<div className="col-span-4">
							<p className="text-left text-balance">
								In diesem Kurs lernen Piloten die Grundlagen der Luftrettung,
								Einsatzverfahren, den Umgang mit dem BOS-Funk und einige
								medizinische Basics. Der Kurs bietet eine ideale Vorbereitung
								für alle Standard Operations bei Virtual Air Rescue.
							</p>
						</div>
						<div className="col-span-2">Badge</div>
					</div>
					<div className="card-actions flex justify-between items-center mt-5">
						<p className="text-gray-600 text-left flex items-center gap-2">
							<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b> Keine
						</p>
						<ModalBtn
							user={user}
							event={event}
							title={event.name}
							dates={(event as any).appointments}
							participant={(event as any).participants[0]}
							modalId={`${event.name}_modal.${event.id}`}
						/>
					</div>
				</div>
			</div>
		</div>
	);
};