import fetchApi, { ApiMethods, ApiPaths } from "./../utils/api";
import { FormEventHandler, useState } from "react";

type useFormProps = {
  path: ApiPaths;
  query?: string;
  method: ApiMethods;
};

type FormMessage = {
  message: string;
};

const useForm = ({ path, method, query }: useFormProps) => {
  const [error, setError] = useState<FormMessage>();
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState<FormMessage>();

  const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    setLoading(true);
    const formData = new FormData(event.currentTarget);
    const { error, message } = await fetchApi({
      path,
      query,
      method,
      body: Object.fromEntries(formData.entries()),
    });
    if (error) {
      setLoading(false);
      setError({ message: error });
    } else {
      setLoading(false);
      setSuccess({ message: message || "Success!" });
    }
  };
  return { error, loading, success, submitHandler };
};

export default useForm;