import LikeButton from "@/components/like-button";
import PostMessageForm from "@/components/post-messages";
import { prisma } from "@/lib/db";
import { Prisma } from "@prisma/client";

type messageType = Prisma.MessageUncheckedCreateInput
type messageItemProps = {
  msg: messageType;
};

export default async function HomePage() {
  let messages = null
  try {
    messages = await prisma.message.findMany({
      orderBy: {
        sentAt: "desc"
      }
    })

  } catch (error) {
    console.log("the database is not running, try: 'npx prisma migrate dev --name init' if you want to use the database")
  }

  return (
    <div>
      <h1>Home WIP</h1>
      <p>This will be where all messages show up.</p>
      <p>Needs a reload after posting!!</p>
      <PostMessageForm data={messages} />
      {messages ?
        <>
          {messages.map((msg) => (
            <MessageItem msg={msg} key={msg.id} />
          ))}

        </>
        :
        <p>no messages / no database</p>}
    </div>
  )
}

const MessageItem = ({ msg }: messageItemProps) => {
  if (!msg.id) {
    return <div></div>
  }
  return (
    <div className="flex border-b border-gray-200 py-4">
      <div className="flex-shrink-0">
        <div className="h-10 w-10 rounded-full bg-gray-300"></div> {/* Profile picture */}
      </div>
      <div className="ml-4 flex flex-col">
        <div>
          <div className="flex items-center">
            <span className="font-bold mr-2">{msg.author}</span>
            <span className="text-gray-500 text-sm">
              {formatDate(new Date(msg.sentAt!))}
            </span>
          </div>
          <div className="text-gray-800">{msg.content}</div>
        </div>
        <div className="mt-4">
          <div className="flex items-center">
            <div className="bg-gray-200 rounded-lg py-10 px-20 mr-2">
              {/* potential Image */}
            </div>
          </div>
        </div>
        <LikeButton data={{
          postId: msg.id,
          author: msg.author
        }} />
        <span className="text-gray-600">Like Count: {msg.likeCount} | <span className="text-gray-600">ReplyButton (Number of Replies)</span></span>
      </div>
    </div>
  );
};

function formatDate(date: Date) {
  return date.toLocaleDateString("en-US", {
    day: "numeric",
    month: "short",
    year: "numeric"
  });
}