import { ImageComponentFullHeight } from "@components/image";
import { StackCard } from "@components/stack-card";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useNavigate, useParams } from "@solidjs/router";
import { For, type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown";

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

    const { userImages, stacks, onDeleteImage } = useSearchImageContext();

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

    return (
        <main class="flex flex-col items-center gap-4">
            <div class="w-full bg-white rounded-xl p-4">
                <ImageComponentFullHeight ID={imageId} onDelete={(id) => {
                    onDeleteImage(id);
                    nav("/");
                }} />
            </div>
            <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
                <h2 class="font-bold text-2xl">Stacks</h2>
                <div class="grid grid-cols-3 gap-4">
                    <For each={image()?.ImageStacks}>
                        {(imageList) => (
                            <StackCard
                                stack={stacks().find((l) => l.ID === imageList.StackID)!}
                            />
                        )}
                    </For>
                </div>
            </div>
            <div class="w-full bg-white rounded-xl p-4">
                <h2 class="font-bold text-2xl">Description</h2>
                <SolidjsMarkdown>{image()?.Description}</SolidjsMarkdown>
            </div>
        </main>
    );
};