/* eslint-disable react/display-name */
/* eslint-disable react-hooks/rules-of-hooks */

"use client";

import type { ForwardedRef, PropsWithChildren } from "react";
import { forwardRef, useCallback, useImperativeHandle } from "react";
import type {
  DefaultValues,
  FieldValues,
  SubmitHandler,
  UseFormReturn,
  ValidationMode,
} from "react-hook-form";
import { FormProvider, useForm } from "react-hook-form";

export interface FormHandles {
  submit: VoidFunction;
  onlyValidate: VoidFunction;
}
interface Props<T extends FieldValues = FieldValues> extends PropsWithChildren {
  methods?: UseFormReturn<T, any>;
  defaultValues?: DefaultValues<T>;
  onSubmit: SubmitHandler<T>;
  onChange?: (values: T) => void;
  mode?: keyof ValidationMode | undefined;
  shouldAutoScroll?: boolean;
}

export type SubmitFunction<T extends FieldValues = FieldValues> =
  SubmitHandler<T>;

const Form = <T extends FieldValues = FieldValues>(
  props: Props<T>,
  ref: ForwardedRef<FormHandles>,
) => {
  const methods =
    // eslint-disable-next-line react-hooks/rules-of-hooks
    props.methods ??
    useForm({
      defaultValues: props.defaultValues,
      mode: props.mode ?? "onSubmit",
    });

  const {
    formState: { errors },
    trigger,
  } = methods;

  async function onSubmit() {
    if (props.shouldAutoScroll) {
      await trigger();
      const firstErrorKey = Object.keys(errors)[0];
      if (firstErrorKey) {
        const firstErrorElement = document.getElementById(firstErrorKey);

        if (firstErrorElement) {
          firstErrorElement.scrollIntoView({
            behavior: "smooth",
          });
        }
      }
    }
    methods.handleSubmit(props.onSubmit)();
  }

  const handleChange = useCallback(() => {
    return props?.onChange?.(methods?.getValues());
  }, [props, methods]);

  useImperativeHandle(ref, () => ({
    submit: onSubmit,
    onlyValidate: methods.handleSubmit(() => {}),
  }));

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={methods.handleSubmit(props.onSubmit)}
        // Note : I use setTimeout to wait for all values of the form are updated
        // Because this form element is native and our custom provider doesn't be ready yet when the form is changed
        onChange={() => setTimeout(() => handleChange(), 500)}
        autoComplete="none"
      >
        {props.children}
      </form>
    </FormProvider>
  );
};

export default forwardRef(Form) as <T extends FieldValues = FieldValues>(
  props: Props<T> & { ref?: ForwardedRef<FormHandles> },
) => ReturnType<typeof Form>;