import { AddExpenseItemForm } from '@/entity/expenses/item';
import { Modal } from '@/shared/ui/Modal';

import { useAddExpenseItemButton } from '../hooks/useAddExpenseItemButton';

import type { ExpenseList } from '@/entity/expenses/list';
import type { ButtonHTMLAttributes, FC, RefObject } from 'react';

type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

type AddExpenseItemButtonProps = BaseButtonProps & {
  listId: ExpenseList['id'];
  ref?: RefObject<HTMLButtonElement>;
};

const AddExpenseItemButton: FC<AddExpenseItemButtonProps> = (props) => {
  const {
    listId,
    ref,
    onClick,
    ...buttonProps
  } = props;

  const {
    isOpen,
    isPending,
    onClickHandler,
    onCloseModalHandler,
    onFormSubmitHandler,
  } = useAddExpenseItemButton({ listId, onClick });

  return (
    <>
      <button
        ref={ref}
        type="button"
        onClick={onClickHandler}
        {...buttonProps}
      >
        Добавить элемент
      </button>

      <Modal open={isOpen} onClose={onCloseModalHandler}>
        <AddExpenseItemForm disabled={isPending} onSubmit={onFormSubmitHandler} />
      </Modal>
    </>

  );
};

export default AddExpenseItemButton;