import type { ButtonHTMLAttributes, FC, RefObject } from 'react';

import type { IncomeListItem } from '@/entity/incomes/item';

import { EditIncomeItemForm } from '@/entity/incomes/item';
import { Modal } from '@/shared/ui/Modal';

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

type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

type EditIncomeItemButtonProps = BaseButtonProps & {
  item: IncomeListItem;
  ref?: RefObject<HTMLButtonElement>;
};

const EditIncomeItemButton: FC<EditIncomeItemButtonProps> = (props) => {
  const {
    item,
    onClick,
    ref,
    ...restProps
  } = props;

  const {
    isOpen,
    isPending,
    onClickHandler,
    onCloseModalHandler,
    onFormSubmitHandler,
  } = useIncomeItemButton({ item, onClick });

  return (
    <>
      <button
        disabled={isPending}
        onClick={onClickHandler}
        ref={ref}
        type="button"
        {...restProps}
      >
        Редактировать
      </button>

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

export default EditIncomeItemButton;