import { AddBankCardForm } from '@/entity/cards';
import { Modal } from '@/shared/ui/Modal';

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

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

type AddBankCardButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  ref?: Ref<HTMLButtonElement>;
};

const AddBankCardButton: FC<AddBankCardButtonProps> = (props) => {
  const { ref, onClick, ...restProps } = props;

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

  return (
    <>
      <button
        ref={ref}
        type="button"
        onClick={onClickHandler}
        {...restProps}
      >
        Добавить
      </button>

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

export default AddBankCardButton;