"use client";
import React from "react";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
import { useForm, Controller } from "react-hook-form";
import { FormEvent } from "react";

interface IssueForm {
  title: string;
  description: string;
}

const NewIssuePage = () => {
  const { register, control, handleSubmit } = useForm<IssueForm>();
  // console.log(register('title'))

  // handle form submit
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const response = await fetch("/api/issues", {
      method: "POST",
      body: formData,
    });

    // Handle response if necessary
    // const data = await response.json();
    // ...
  }

  return (
    <form
      className="max-w-xl"
      // onSubmit={handleSubmit((data) => console.log(data))}
      onSubmit={onSubmit}
    >
      <input
        type="text"
        placeholder="Type Here"
        className="input w-full border-zinc-300 mb-2"
        {...register("title")}
      />
      <Controller
        name="description"
        control={control}
        render={({ field }) => (
          <SimpleMDE placeholder="Description" {...field}></SimpleMDE>
        )}
      />
      <button className="btn bg-emerald-400 text-black hover:bg-white">
        Submit Ticket
      </button>
    </form>
  );
};

export default NewIssuePage;