import { ImageComponent } from "@components/image";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { For, type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown";
import { List } from "../list";
import { ListCard } from "@components/list-card";

export const ImagePage: Component = () => {
	const { imageId } = useParams<{ imageId: string }>();

	const { userImages, lists } = useSearchImageContext();

	const image = () => userImages().find((i) => i.ImageID === imageId);

	return (
		<main class="flex flex-col items-center gap-4">
			<div class="w-full bg-white rounded-xl p-4">
				<ImageComponent ID={imageId} />
			</div>
			<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
				<h2 class="font-bold text-2xl">Description</h2>
				<div class="grid grid-cols-3 gap-4">
					<For each={image()?.Image.ImageLists}>
						{(imageList) => (
							<ListCard
								list={lists().find((l) => l.ID === imageList.ListID)!}
							/>
						)}
					</For>
				</div>
			</div>
			<div class="w-full bg-white rounded-xl p-4">
				<h2 class="font-bold text-2xl">Description</h2>
				<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
			</div>
		</main>
	);
};