import { useParams } from "@solidjs/router";
import { JSXElement, Show, Suspense, createResource, useContext } from "solid-js";
import { LoginContext } from "../Context/GlobalState";
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);
  const login_ctx = useContext(LoginContext)!; // Assuming login context is always available

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