import React from 'react';
import Modal from 'react-responsive-modal';
import PropTypes from 'prop-types';

/**
 * A stateless component for responsive Modal PopUp. It uses react-responsive-modal. Modal will receive all additional props.
 */
 
const ResponsiveModalPopUp = (props) => {
    return (
      <div>
        <Modal
        {...props} 
        classNames={{
          overlay: 'jp-responsive-overlay-container ' + props.parentClassOverlay,
          modal: 'jp-responsive-modal-container ' + props.parentClassModal,
        }}
        open={props.openResponsiveModal} 
        onClose={props.onCloseResponsiveModal} 
        showCloseIcon={props.showCloseIcon}
        >
            {props.children}       
        </Modal>
      </div>
    );
  }
export default ResponsiveModalPopUp;

ResponsiveModalPopUp.defaultProps = {
   children:'',
   openResponsiveModal: false,
   showCloseIcon:false
}

ResponsiveModalPopUp.propTypes ={
  /** content of modal popup */
  children: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
    PropTypes.array
  ]),
  /** flag to open modal */
  openResponsiveModal: PropTypes.bool,
  /** function to close modal */
  onCloseResponsiveModal: PropTypes.func,
  /** show close icon  */
  showCloseIcon: PropTypes.bool,
  /** parent class name for modal overlay  */
  parentClassOverlay: PropTypes.string,
  /** parent class name for modal popup  */
  parentClassModal: PropTypes.string
}