import {reactive} from "vue";

export default function useForm(fields) {
  const form = reactive({
    fields,
    error: null,
    processing: false,
    async submit(submitter) {
      if (this.processing) return;

      this.error = null;
      this.processing = true;

      try {
        await submitter(this.fields);
      } catch (err) {
        this.error = err;
      }

      this.processing = false;
    },
  });

  return form;
}

// -------------- Usage: -------------- 
const router = useRouter();
const form = useForm({
  title: "",
  content: "",
});

async function handleSubmit() {
  await form.submit(async (fields) => {
    await axios.post("/api/posts", fields);
    await router.push("/");
  });

  if (form.error?.status === 403) {
    await router.replace("/login");
  }
}