import { ImageComponent } from "@components/image";
import { ItemModal } from "@components/item-modal/ItemModal";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { Component, For, Show } from "solid-js";

export const Entity: Component = () => {
	const params = useParams<{ entityId: string }>();

	const { images } = useSearchImageContext();

	const entity = () => images().find((i) => i.data.ID === params.entityId);

	return (
		<Show when={entity()} fallback={<>Sorry, this entity could not be found</>}>
			{(e) => (
				<div>
					<ItemModal item={e()} />
					<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 bg-white p-4 rounded-xl border border-neutral-200">
						<For each={e().data.Images}>
							{(imageId) => <ImageComponent ID={imageId} />}
						</For>
					</div>
				</div>
			)}
		</Show>
	);
};