import { useState } from 'react';

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

import type { MouseEventHandler } from 'react';

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

export const useEditExpenseItemButton = (args: UseAddExpenseItemButtonArgs) => {
  const { item, onClick } = args;

  const [isOpen, setIsOpen] = useState(false);
  const { mutateAsync: editExpenseItemMutation, isPending } = useEditExpenseItem({
    id: item.id,
    listId: item.expenseListId,
  });
  const onCloseModalHandler = () => {
    setIsOpen(false);
  };

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

  const onFormSubmitHandler = async (data: EditExpenseItemFormValues) => {
    // todo добавить обработку ошибок (код + тест)
    await editExpenseItemMutation(data);
    setIsOpen(false);
  };

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