import { useLoaderData, Form } from "@remix-run/react";
import { unstable_createFileUploadHandler, unstable_parseMultipartFormData } from "@remix-run/node";
import prisma from "~/utils/db.server";
import { redirect } from "@remix-run/node";
import { Link } from "@remix-run/react";

export async function action({ request }) {
  const clonedData = request.clone();
  const formData = await clonedData.formData();
  const title = formData.get("title");
  const post = formData.get("post");

  const fileUploadHandler = unstable_createFileUploadHandler({
    directory: './public/uploads/',
    maxPartSize: 500000,
    file: ({ filename }) => filename,
  });

  const multiPartformdata = await unstable_parseMultipartFormData(request, fileUploadHandler);
  const imageName = multiPartformdata.get("image").name;

  const newThread = await prisma.thread.create({
    data: {
      title: title,
      post: post,
      imageName: imageName,
    },
  });

  return redirect(`threads/${newThread.id}`);
}

export async function loader() {
  const data = await prisma.thread.findMany({
    include: {
      posts: true,
    },
  });

  return data;
}

export default function Index() {
  const data = useLoaderData();
  console.log(data)

  return (
    <div>
      <Form method="post" encType="multipart/form-data">
          <label htmlFor="">Title: <input required type="text" name="title" /></label>
          <br />
          <label htmlFor="">Post: <input required type="text" name="post" /></label>
          <br />
          <label htmlFor="">Image: <input required accept="image/*" type="file" id="image-upload" name="image" /></label>
          <br />
          <button type="submit">Submit</button>   
      </Form>
      <ul>
        {data.map(thread => 
          <li key={thread.id}>
            <Link to={`threads/${thread.id}`}>{thread.title}</Link>
          </li>  
        )}
      </ul>
    </div>
  );
};