import { useRef } from 'react';

import {
  Button,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  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<HTMLButtonElement>(null);
  return (
    <DialogRoot role="alertdialog"
      open={disclosure.open}
      //leastDestructiveRef={cancelRef}
      onOpenChange={disclosure.onClose}
      data-testid="confirm-pop-up"
    >
      <DialogContent>
        <DialogHeader fontSize="lg" fontWeight="bold">
          {title}
        </DialogHeader>

        <DialogBody>{body}</DialogBody>

        <DialogFooter>
          <Button onClick={disclosure.onClose} ref={cancelRef}>
            Cancel
          </Button>
          <Button colorScheme="red" onClick={onClickConfirm} ml={3}>
            {confirmTitle}
          </Button>
        </DialogFooter>
      </DialogContent>
    </DialogRoot>
  );
};