'use client';
import React, { useEffect } from 'react';
import { deleteTask } from '@/utils/actions';
import { useFormStatus, useFormState } from "react-dom";

const DeleteButton = () => {
  const { pending } = useFormStatus();
  return (
    <button className='btn btn-xs btn-error' disabled={pending}>
      {pending ? 'pending...' : 'delete'}
    </button>
  );
};
const initialFormState = {
  message: null
}
const DeleteForm = ({ id }) => {
  const [state, formAction] = useFormState(deleteTask, initialFormState)

  useEffect(() => {
    if (state.message === "deleted") {
      toast.error("There was an error")
      return
    }
    if (state.message === "unable to be deleted") {
      toast.success("Successfully added a new task")
      return
    }

  }, [state])


  return (
    <form action={formAction}>
      <input type='hidden' name='id' value={id} />
      <DeleteButton />
    </form>
  );
};
export default DeleteForm;