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>
    );
};

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>
    );
};
