import React from 'react';
import { Modal as BModal, ModalProps as BootstrapModalProps, Button } from 'react-bootstrap';
import './Modal.scss';

interface ModalProps extends BootstrapModalProps {
  title: any;
  children: any;
  footer: any;
  show: boolean;
  backdrop: boolean;
  onHide?: () => void;
  onSave?: () => void;
  onCancel?: () => void;
}

const Modal = ({
  title,
  children,
  footer,
  show,
  onHide,
  onSave,
  onCancel,
  backdrop,
  ...props
}: ModalProps) => {
  let footerComponent = (
    <React.Fragment>
      <Button className="button-cancel" variant="secondary" size="sm" onClick={onCancel}>
        Cancel
      </Button>
      <Button className="button-save" variant="primary" size="sm" onClick={onSave}>
        Save
      </Button>
    </React.Fragment>
  )

  if (footer || footer === false) {
    footerComponent = footer;
  }

  return (
    <BModal
      show={show}
      onHide={onHide}
      backdrop={backdrop || 'static'}
      keyboard={backdrop}
      {...props}
    >
      <BModal.Header closeButton>
        <BModal.Title>
          {title}
        </BModal.Title>
      </BModal.Header>
      <BModal.Body>
        {children}
      </BModal.Body>
      {
        footerComponent && (
          <BModal.Footer>
            {footerComponent}
          </BModal.Footer>
        )
      }
    </BModal>
  );
};

export default Modal;
export { Modal, ModalProps };