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

import { loadSpinner } from "../Util/Icons";
import { getPost } from "../Util/api";
import { CommentSection } from "./CommentSection";
import { PostSegment } from "./Posts";
import { NewCommentInputArea } from "./NewComment";

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

  return (
    <Suspense fallback={loadSpinner()}>
      <Show when={post()}>
        <PostSegment post={post()!} />
        <NewCommentInputArea parentPostId={parseInt(params.postid)}/>
        <CommentSection postId={params.post_id} />
      </Show>
    </Suspense>
  );
}