import { type MouseEventHandler, useState } from 'react';

import type { AddBankCardFormValues } from '@/entity/cards';

import { useAddBankCard } from '@/entity/cards';

type UseAddBankCardButtonArgs = {
  onClick?: MouseEventHandler<HTMLButtonElement>;
};

export const useAddBankCardButton = (args: UseAddBankCardButtonArgs) => {
  const { onClick } = args;
  const [isOpen, setIsOpen] = useState(false);

  const { isPending, mutateAsync: addBankCardMutation } = useAddBankCard();

  const onCloseModalHandler = () => {
    setIsOpen(false);
  };

  const onClickHandler: MouseEventHandler<HTMLButtonElement> = (event) => {
    onClick?.(event);
    setIsOpen(true);
  };

  const onFormSubmitHandler = async (data: AddBankCardFormValues) => {
    await addBankCardMutation(data);
    setIsOpen(false);
  };

  return {
    isOpen,
    isPending,
    onClickHandler,
    onCloseModalHandler,
    onFormSubmitHandler,
  };
};