import { Component, createEffect, For } from "solid-js";
import {
	SearchImageStore,
	useSearchImageContext,
} from "../contexts/SearchImageContext";

const CategoryColor: Record<
	keyof ReturnType<SearchImageStore["categories"]>,
	string
> = {
	contact: "bg-red-500",
	location: "bg-green-500",
	event: "bg-blue-500",
	note: "bg-purple-500",
};

export const Categories: Component = () => {
	const { categories } = useSearchImageContext();

	createEffect(() => {
		console.log(categories());
	});

	return (
		<div class="w-full grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] auto-rows-[minmax(100px,1fr)] grid-flow-col gap-2">
			<For each={Object.entries(categories())}>
				{([category, group]) => (
					<div
						class={
							"col-span-2 flex flex-col " +
							CategoryColor[category as keyof typeof CategoryColor] +
							" " +
							(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
						}
					>
						<p class="uppercase">
							{category}: {group.length}
						</p>
					</div>
				)}
			</For>
		</div>
	);
};