import { EditCashForm } from '@/entity/cash';
import { Modal } from '@/shared/ui/Modal';

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

import type { CashItem } from '@/entity/cash';
import type { ButtonHTMLAttributes, FC, Ref } from 'react';

export type EditCashButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  cash: CashItem;
  ref?: Ref<HTMLButtonElement>;
};
const EditCashButton: FC<EditCashButtonProps> = (props) => {
  const {
    cash,
    ref,
    onClick,
    ...restProps
  } = props;

  const {
    isOpen,
    isPending,
    onCloseModalHandler,
    onClickHandler,
    onFormSubmitHandler,
  } = useEditCashButton({ cash });

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

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

export default EditCashButton;