import { SearchCard } from "@components/search-card/SearchCard";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { base, UserImage } from "@network/index";
import { useParams } from "@solidjs/router";
import { For, Show, type Component } from "solid-js";

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

	const { imagesWithProperties } = useSearchImageContext();

	const imageProperties = (): UserImage[] | undefined =>
		Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];

	return (
		<main class="flex flex-col items-center">
			<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
			<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
				<Show when={imageProperties()}>
					{(image) => (
						<For each={image()}>
							{(property) => <SearchCard item={property} />}
						</For>
					)}
				</Show>
			</div>
		</main>
	);
};
