import { ApiResulState, FetchApiInterface } from "./../utils/api";
import { FormEventHandler, useState } from "react";

export type FormMessage = {
  message: string;
};

export type Success = FormMessage & {
  result: User;
};

type SubmitHandler = FormEventHandler<HTMLFormElement>;

type UseForm = {
  loading: boolean;
  submitHandler: SubmitHandler;
  error?: FormMessage;
  success?: Success;
};

const useForm = <T>(
  fetchApi: FetchApiInterface<T>,
  resetAfterSubmit?: boolean
): UseForm => {
  const [error, setError] = useState<FormMessage>();
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState<Success>();

  const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    setLoading(true);
    const formData = new FormData(event.currentTarget);
    const body = Object.fromEntries(formData.entries()) as unknown as T;
    const result = await fetchApi(body);
    setLoading(false);
    switch (result.state) {
      case ApiResulState.SUCCESS: {
        setSuccess({ message: result.message, result: result.user });
        setError(undefined);
        if (resetAfterSubmit) {
          (event.target as HTMLFormElement).reset();
        }
        break;
      }
      case ApiResulState.ERROR: {
        setError({ message: result.error });
        setSuccess(undefined);
        break;
      }
    }
  };
  return { error, loading, success, submitHandler };
};

export default useForm;