"use client"

import { Post, Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition, useEffect, useState } from "react";

type commentType = Prisma.CommentUncheckedCreateInput

export default function PostCommentForm(props: { postid: string }) {

    const [formData, setFormData] = useState<commentType>({ message: "" } as commentType);
    const router = useRouter();
    const postid = props.postid

    async function postComment(e: any) {
        e.preventDefault()

        formData.postId = postid;

        const response = await fetch('http://localhost:3000/api/comments', {
            method: 'POST',
            body: JSON.stringify(formData)
        })

        startTransition(() => {
            // Refresh the current route and fetch new data from the server without
            // losing client-side browser or React state.
            router.refresh();
        });
        return await response.json()
    }

    const characterCount = formData.message.length;
    const isOverLimit = characterCount >= 1000;

    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        const { value } = e.target;
        setFormData({ ...formData, message: value });
    };

    return (
        <div className="p-4 pb-20">
            <form onSubmit={postComment}>
                <textarea
                    placeholder="Write something..."
                    name="message"
                    value={formData.message}
                    onChange={handleInputChange}
                    className="w-full p-2 border border-gray-600 rounded-xl resize-none"
                    rows={5}
                    maxLength={1000}
                ></textarea>
                <div className="flex justify-end mt-2">
                    <span className={`${isOverLimit ? "text-red-500" : "text-gray-500"} text-sm`}>
                        {characterCount}/{1000}
                    </span>
                </div>
                <button type="submit" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
                    Post
                </button>
            </form>
        </div>
    )
}