import { ImageComponent } from "@components/image";
import { ConcreteItemModal } 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 (
		<div>
			<Show
				when={entity()}
				fallback={<>Sorry, this entity could not be found</>}
			>
				{(e) => (
					<div>
						<ConcreteItemModal item={e()} />
						<For each={e().data.Images}>
							{(imageId) => <ImageComponent ID={imageId} />}
						</For>
					</div>
				)}
			</Show>
		</div>
	);
};
