import type { ButtonProps } from '@mui/material';
import type { FC, RefObject } from 'react';

import { Button } from '@mui/material';

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

import { DeleteExpenseItemForm } from '@/entity/expenses/item';
import { DataTestId } from '@/shared/constants';
import { Modal } from '@/shared/ui/Modal';

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

type DeleteExpenseItemButtonProps = ButtonProps & {
  item: ExpenseListItem;
  ref?: RefObject<HTMLButtonElement>;
};
const DeleteExpenseItemButton: FC<DeleteExpenseItemButtonProps> = (props) => {
  const {
    item,
    onClick,
    ref,
    ...restProps
  } = props;
  const {
    isOpen,
    isPending,
    onClickHandler,
    onCloseModalHandler,
    onFormSubmitHandler,
  } = useDeleteExpenseItemButton({ item, onClick });

  return (
    <>
      <Button
        color="error"
        data-testid={DataTestId.DELETE_EXPENSE_ITEM_BUTTON}
        onClick={onClickHandler}
        ref={ref}
        size="small"
        {...restProps}
      >
        Удалить
      </Button>

      <Modal onClose={onCloseModalHandler} open={isOpen}>
        <DeleteExpenseItemForm disabled={isPending} onSubmit={onFormSubmitHandler} />
      </Modal>
    </>
  );
};

export default DeleteExpenseItemButton;