import { A, useParams } from "@solidjs/router";
import { createEffect, createResource, For, Suspense } from "solid-js";
import { getUserImages } from "./network";

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

    const [image] = createResource(async () => {
        const userImages = await getUserImages();

        const currentImage = userImages.find((image) => image.ID === imageId);
        if (currentImage == null) {
            // TODO: this error handling.
            throw new Error("must be valid");
        }

        return currentImage;
    });

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

    return (
        <Suspense fallback={<>Loading...</>}>
            <A href="/">Back</A>
            <h1 class="text-2xl font-bold">{image()?.Image.ImageName}</h1>
            <img src={`http://localhost:3040/image/${image()?.ID}`} />
            <div class="flex flex-col">
                <For each={image()?.Tags ?? []}>
                    {(tag) => <div>{tag.Tag}</div>}
                </For>
            </div>
        </Suspense>
    );
}