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

/**
 * A stateless Modal PopUp for desktop. It uses react-modal. Modal will receive all additional props.
 */

const ModalPopUp = (props) => {
    return (
        <div>
            <Modal
                portalClassName={`jp-modalpopup-container ${props.childClassName}`}
                isOpen={props.isOpen}
                onAfterOpen={props.onAfterOpen}
                onRequestClose={props.onRequestClose}
                shouldCloseOnOverlayClick={props.shouldCloseOnOverlayClick}
                ariaHideApp={false}
                style={{
                    overlay: {
                        backgroundColor: props.backgroundColor,
                        backdrop: props.backdrop,
                    },
                    content: {
                        height: props.Modalheight,
                        width: props.Modalwidth
                    }
                }}
            >
                {props.children}
            </Modal>
        </div>
    );
};
export default ModalPopUp;

ModalPopUp.defaultProps = {
    shouldCloseOnOverlayClick: true,
};

ModalPopUp.propTypes = {
    /** function to open modal */
    isOpen: PropTypes.bool,
    /** function to close modal */
    onRequestClose: PropTypes.func,
    /** function for onAfter open modal */
    onAfterOpen: PropTypes.func,
    /** height of pop up */
    Modalheight: PropTypes.number,
    /** width of pop up */
    Modalwidth: PropTypes.number,
    /** background color of overlay */
    backgroundColor: PropTypes.string,
    /** backdrop effect  */
    backdrop: PropTypes.string,
    /** content in modal pop up */
    children: PropTypes.object,
    /** should not close on click overlay  */
    shouldCloseOnOverlayClick: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.bool
    ]),
    /** Parent className for modal pop up */
    childClassName: PropTypes.string
};