import { useRouter } from "next/navigation";
import { useConfirm } from "@frontend-opensource/use-react-hooks";
import { type FieldValues, type UseFormReturn } from "react-hook-form";
import { Button } from "@common/components";
import { Form } from "./form";

type FormWrapperProps<T extends FieldValues> = {
  form: UseFormReturn<T>;
  children: React.ReactNode;
  isModifyMode?: boolean;
  handleSave: (data: T) => Promise<unknown>;
  handleDelete?: () => Promise<unknown>;
};

function FormWrapper<T extends FieldValues>({
  form,
  children,
  isModifyMode,
  handleSave,
  handleDelete,
}: FormWrapperProps<T>) {
  const router = useRouter();
  const { confirm } = useConfirm();

  const onSubmit = async (data: T) => {
    const confirmMessage = isModifyMode
      ? "수정하시겠습니까?"
      : "저장하시겠습니까?";

    if (await confirm(confirmMessage)) {
      await handleSave(data);
    }
  };

  const onDelete = async () => {
    if (await confirm("삭제하시겠습니까?")) {
      await handleDelete?.();
    }
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        {children}
        <div className="flex justify-center gap-4 pb-12 pt-10">
          <Button
            size="lg"
            color="white"
            type="button"
            onClick={() => router.back()}
          >
            목록
          </Button>
          <Button size="lg" type="submit">
            저장
          </Button>
          {isModifyMode && handleDelete && (
            <Button size="lg" color="red" type="button" onClick={onDelete}>
              삭제
            </Button>
          )}
        </div>
      </form>
    </Form>
  );
}

export { FormWrapper };