import { useParams } from "@solidjs/router";
import { For, JSXElement, Show, Suspense, createResource } from "solid-js";

import { loadSpinner } from "../Util/Icons";
import { getComments, getPost } from "../Util/api";
import { PostSegment } from "./Posts";

export function SinglePost(): JSXElement {
  const params = useParams();
  const [post] = createResource(params.postid, getPost);
  const [comments] = createResource(params.postid, () =>
    getComments(params.postid, 0, 10)
  );

  return (
    <Suspense fallback={loadSpinner()}>
      <Show when={post()}>
        <PostSegment post={post()!} />
        <For each={comments()!}>
          {(comment) => (
            // TODO: This should be a separate component
            <div class="comment">
              <p>{comment.content}</p>
            </div>
          )}
        </For>
      </Show>
    </Suspense>
  );
}