import { useState, useEffect } from 'react';
import StaticPost from "./staticPost";

export interface PostContent {
  id: number,
  title: string,
  content: string,
  userId: number,
  parentId: number,
  createdAt: string,
  author: {
    name: string,
    display_name: string,
    id: number
  },
  replies: any[];
  _count: {
    replies: number;
  };
}

export interface PostProps {
  postId: number;
}


export default function Post({ postId }: PostProps) {
  const [postContent, setPostContent] = useState<PostContent>();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchPost = async () => {
      const response = await fetch(`http://localhost:8787/posts/${postId}/view`);
      const jsonContent: Array<PostContent> = await response.json();

      let newPostContent: PostContent = jsonContent[0] as PostContent;

      if (newPostContent) {
        setPostContent(newPostContent);
        setIsLoading(false);
      }
    };
    fetchPost();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!postContent) {
    return <p>Failed to load!</p>;
  }


  return (
    <StaticPost postContent={postContent} />
  )
}