import { IconX } from "@tabler/icons-solidjs";
import type { UserImage } from "../../network";
import { Show, type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown";

type Props = {
	item: UserImage;
	onClose: () => void;
};

const NullableParagraph: Component<{
	item: string | null;
	itemTitle: string;
}> = (props) => {
	return (
		<Show when={props.item}>
			{(item) => (
				<>
					<p class="font-semibold text-xl">{props.itemTitle}</p>
					<p class="text-md">{item()}</p>
				</>
			)}
		</Show>
	);
};

export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
	switch (props.item.type) {
		case "note":
			return (
				<SolidjsMarkdown>
					{props.item.data.Content.slice(
						"```markdown".length,
						props.item.data.Content.length - "```".length,
					)}
				</SolidjsMarkdown>
			);
		case "location":
			return (
				<div class="flex flex-col gap-2">
					<p class="font-semibold text-xl">Address</p>
					<p class="text-md">{props.item.data.Address}</p>
				</div>
			);
		case "event":
			return (
				<div class="flex flex-col gap-2">
					<p class="font-semibold text-xl">Event</p>
					<p class="text-md">{props.item.data.Name}</p>

					<NullableParagraph
						itemTitle="Start Time"
						item={props.item.data.StartDateTime}
					/>
					<NullableParagraph
						itemTitle="End Time"
						item={props.item.data.EndDateTime}
					/>
				</div>
			);
		case "contact":
			return (
				<div class="flex flex-col gap-2">
					<p class="font-semibold text-xl">Contact</p>
					<p class="text-md">{props.item.data.Name}</p>

					<NullableParagraph itemTitle="Email" item={props.item.data.Email} />

					<NullableParagraph
						itemTitle="Phone Number"
						item={props.item.data.PhoneNumber}
					/>
				</div>
			);
	}
};

export const ItemModal: Component<Props> = (props) => {
	return (
		<div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
			<div class="flex justify-between">
				<h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
				<button type="button" onClick={props.onClose}>
					<IconX size={24} class="text-neutral-500" />
				</button>
			</div>
			<div class="flex flex-col gap-2 mb-2">
				<ConcreteItemModal item={props.item} />
			</div>
		</div>
	);
};