import Form from 'next/form'
import { auth } from '@clerk/nextjs/server';
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export default async function Page() {
  async function createPost(formData: FormData) {
    "use server";

    const { userId } = await auth(); //
    if (!userId) {
      throw new Error("You must be logged in to post!");
    }

    const first_name = formData.get("fname") as string;
    const last_name = formData.get("lname") as string;
    const post_text = formData.get("post-text") as string;
    const pet_species = formData.get("pet_species") as string;

    console.log(first_name, last_name, post_text, pet_species);

    await prisma.post.create({
      data: {
        content: post_text,
        petId: 3,
      },
    });

    revalidatePath("/");
    redirect("/");
  }

  return <>
    <h1>This is create post content</h1>
      <Form action={createPost}>
        <label htmlFor="fname">First name:</label><br/>
        <input type="text" id="fname" name="fname" className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"/><br/>
        <label htmlFor="lname">Last name:</label><br/>
        <input type="text" id="lname" name="lname" className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"/><br/>
        <label htmlFor="post-text">Content: </label><br/>
        <textarea id="post-text" name="post-text"className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"/><br/> <br/>

        <label>What animal is posting this?</label><br />
        <input type="radio" name="pet_species" value="Dog" />
        <label htmlFor="html">Dog</label><br />
        <input type="radio" name="pet_species" value="Cat" />
        <label htmlFor="css">Cat</label><br />
        <input type="radio" name="pet_species" value="Goat" />
        <label htmlFor="javascript">Goat</label><br/>

        <button type="submit" className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:focus-visible:outline-indigo-500">Post</button>

        
      </Form> 
    </>
}