import { useState } from "react";
import dynamic from "next/dynamic";

const DynamicConfirmAlert = dynamic(() => import('@/components/elements/ConfirmAlert'));

const useConfirmAlert = ({
  title,
  caption,
  closeText,
  submitText,
  onSubmit,
}) => {
  const [ isOpen, setIsOpen ] = useState(false);
  const [ data, setData ] = useState(null);

  const closeConfirmAlert = () => {
    setIsOpen(false);
    setData(null);
  };
  const openConfirmAlert = ( data = null ) => {
    setIsOpen(true);
    setData(data);
  };
  const handleSubmit = async () => {
    await onSubmit(data);
    closeConfirmAlert();
  };

  const ConfirmAlert = (
    <DynamicConfirmAlert
      title={title}
      caption={caption}
      closeText={closeText}
      submitText={submitText}
      onClose={closeConfirmAlert}
      onSubmit={handleSubmit}
      show={isOpen}
    />
  );

  return {
    isOpen,
    closeConfirmAlert,
    openConfirmAlert,
    ConfirmAlert
  };
}

export default useConfirmAlert;