import { useState } from 'react';

import { type ExpenseListItem, useDeleteExpenseItem } from '@/entity/expenses/item';

import type { MouseEventHandler } from 'react';

type UseDeleteExpenseItemButtonArgs = {
  item: ExpenseListItem;
  onClick?: MouseEventHandler<HTMLButtonElement>;
};

export const useDeleteExpenseItemButton = (args: UseDeleteExpenseItemButtonArgs) => {
  const { item, onClick } = args;
  const [isOpen, setIsOpen] = useState(false);

  const onCloseModalHandler = () => {
    setIsOpen(false);
  };
  const onClickHandler: MouseEventHandler<HTMLButtonElement> = (event) => {
    setIsOpen(true);
    onClick?.(event);
  };

  const { mutateAsync: deleteExpenseItemMutation, isPending } = useDeleteExpenseItem({
    listId: item.expenseListId,
    id: item.id,
  });

  const onFormSubmitHandler = async () => {
    await deleteExpenseItemMutation();
    setIsOpen(false);
  };

  return {
    isOpen,
    onCloseModalHandler,
    onClickHandler,
    isPending,
    onFormSubmitHandler,
  };
};