import CommentButton from "@/components/comment-button";
import LikeButton from "@/components/like-button";
import PostCommentForm from "@/components/post-comment";
import PostItem from "@/components/post-item";
import { db } from "@/lib/db";
import { Prisma } from "@prisma/client";
export const revalidate = 5;  // revalidate this page every 5 seconds

type messageType = any // Prisma.PostUncheckedCreateInput
type messageItemProps = {
    msg: messageType;
};

export default async function PostDetail({ params }: { params: { postid: string } }) {
    const postid = params.postid
    let comments = null
    let message = null

    try {
        comments = await db.comment.findMany({
            where: {
                postId: postid
            },
            orderBy: {
                createdAt: "desc"
            },
            include: {
                user: true,
                Like: true
            },
        })

        message = await db.post.findUnique({
            where: {
                id: postid
            },
            include: {
                user: true,
                Comment: true,
                Like: true,
            },
        })

    } 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>Post Section</h1>
            <p>This will be where all comments show up.</p>
            <p>Needs a reload after posting!!</p>
            <PostItem msg={message} />

            <PostCommentForm postid={postid} />

            {comments ?
                <>
                    {comments.map((msg) => (
                        <CommentItem msg={msg} key={msg.id} />
                    ))}

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

const CommentItem = ({ msg }: any) => {
    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>
            </div>
            <div className="ml-4 flex flex-col flex-grow">
                <div>
                    <div className="flex items-center">
                        <span className="font-bold mr-2">{msg.user.name}</span>
                        <span className="text-gray-500 text-sm">
                            {formatDate(new Date(msg.createdAt!))}
                        </span>
                    </div>
                    <div className="text-gray-800">{msg.message}</div>
                </div>
                <div className="mt-4 flex">
                    <div className="bg-gray-200 rounded-lg py-10 px-20 mr-2">

                    </div>
                </div>
                <div className="flex justify-end" >
                    <LikeButton data={msg} />
                </div>
            </div>
        </div>
    );
};

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