import { useRef } from 'react';

import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Button,
  UseDisclosureReturn,
} from '@chakra-ui/react';

export type ConfirmPopUpProps = {
  title: string;
  body: string;
  confirmTitle: string;
  onConfirm: () => void;
  disclosure: UseDisclosureReturn;
};

export const ConfirmPopUp = ({
  title,
  body,
  confirmTitle,
  onConfirm,
  disclosure,
}: ConfirmPopUpProps) => {
  const onClickConfirm = () => {
    onConfirm();
    disclosure.onClose();
  };
  const cancelRef = useRef(null);
  return (
    <AlertDialog
      isOpen={disclosure.isOpen}
      leastDestructiveRef={cancelRef}
      onClose={disclosure.onClose}
    >
      <AlertDialogOverlay>
        <AlertDialogContent>
          <AlertDialogHeader fontSize="lg" fontWeight="bold">
            {title}
          </AlertDialogHeader>

          <AlertDialogBody>{body}</AlertDialogBody>

          <AlertDialogFooter>
            <Button onClick={disclosure.onClose} ref={cancelRef}>
              Cancel
            </Button>
            <Button colorScheme="red" onClick={onClickConfirm} ml={3}>
              {confirmTitle}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogOverlay>
    </AlertDialog>
  );
};
