import type { Route } from "./+types/home";
import StaticPost from "../components/staticPost";
import { useState, useEffect } from "react";
import type { PostContent } from "../components/post";

export function meta({ }: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export function loader({ context }: Route.LoaderArgs) {
  return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
}

export default function Home() {
  const [feedContent, setFeedContent] = useState<Array<PostContent>>();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchFeed = async () => {
      try {
        const response = await fetch(`http://localhost:8787/feed`);

        // check if response is actually OK (status 200-299)
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const jsonContent: PostContent[] = await response.json();
        setFeedContent(jsonContent);

      } catch (e) {
        console.error("Fetch failed:", e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchFeed();
  }, []);

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

  if (!feedContent) {
    return <p>Failed to load!</p>;
  }
  return (
    <>
      {feedContent && feedContent.length > 0 ? (
        feedContent.map((post) => {
          return <StaticPost postContent={post} />
        })
      ) : (
        <p>No replies found for this thread.</p>
      )}
    </>
  )
}