import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  MetaButton,
} from '@metafam/ds';
import React, { useRef } from 'react';

type Props = {
  isOpen: boolean,
  onNope: () => void;
  onYep: () => void;
  header?: React.ReactNode,
  body?: React.ReactNode,
  loading?: boolean,
  loadingText?: string,
}

export const ConfirmModal: React.FC<Props> = ({
                                                isOpen,
                                                onNope,
                                                onYep,
                                                header,
                                                body,
                                                loading,
                                                loadingText,
                                              }) => {
  const cancelRef = useRef<HTMLButtonElement>(null)

  return (
      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onNope}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              {header || ' Are you sure ?'}
            </AlertDialogHeader>

            {body &&
            <AlertDialogBody>
              {body}
            </AlertDialogBody>
            }

            <AlertDialogFooter>
              <MetaButton
                ref={cancelRef}
                onClick={onNope}
                isDisabled={loading}
              >
                Nope
              </MetaButton>
              <MetaButton
                colorScheme="red"
                onClick={onYep}
                isLoading={loading}
                loadingText={loadingText}
                ml={3}
              >
                Yep
              </MetaButton>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
  );
};