"use client";
import { useFieldArray, useForm } from "react-hook-form";

export interface IContactsStepFields {
  title: string;
  description: string;
  submitButtonText: string;
  fields: {
    name: string;
    label: string;
    placeholder: string;
    required: boolean;
  }[];
}

const useContactsStepPresenter = (initialData?: IContactsStepFields) => {
  const {
    register,
    handleSubmit,
    control,
    getValues,
    formState: { errors },
  } = useForm<IContactsStepFields>({
    defaultValues: initialData || {
      fields: [
        {
          name: "first_name",
          label: "",
          placeholder: "",
          required: false,
        },
        {
          name: "last_name",
          label: "",
          placeholder: "",
          required: false,
        },
        { name: "email", label: "", placeholder: "", required: false },
        { name: "phone", label: "", placeholder: "", required: false },
      ],
    },
  });

  const { fields } = useFieldArray({
    control,
    name: "fields",
  });

  const onSubmit = (data: IContactsStepFields) => {
    console.log(data);
  };

  const collectData = async () => {
    return getValues();
  };

  return {
    register,
    handleSubmit,
    errors,
    onSubmit,
    fields,
    control,
    collectData,
    getValues,
  };
};

export default useContactsStepPresenter;