import * as React from 'react';
import {MouseEvent, SFC} from 'react';
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from './';

export interface ConfirmModalProps {
  confirmButtonLabel?: string;
  message?: string;
  noCancelButton?: boolean;
  open: boolean;
  title?: string;
  onCancel?: () => void;
  onConfirmation: () => void;
}

export const ConfirmModal: SFC<ConfirmModalProps> = ({
  confirmButtonLabel,
  message,
  noCancelButton,
  open,
  title,
  onConfirmation,
  onCancel,
}) => (
  <Modal isOpen={open}>
    <ModalHeader>{title}</ModalHeader>
    <ModalBody>{message}</ModalBody>
    <ModalFooter>
      <Button
        color="primary"
        size="lg"
        onClick={onConfirmation}
      >
        {confirmButtonLabel}
      </Button>

      {!noCancelButton && (
        <Button
          color="secondary"
          size="lg"
          onClick={onCancel}
        >
          Cancel
        </Button>
      )}
    </ModalFooter>
  </Modal>
);

ConfirmModal.displayName = 'ConfirmModal';

ConfirmModal.defaultProps = {
  confirmButtonLabel: 'Confirm',
  message: 'Do you confirm this action?',
  noCancelButton: false,
  title: 'Confirmation',
  onCancel: () => { return; },
};