// utils
import PropTypes from 'prop-types';
import loadable from '@loadable/component';

// components
import Fade from '@mui/material/Fade';
import Grow from '@mui/material/Grow';
import { ClickAwayListener } from '@mui/base/ClickAwayListener';

// lazy loading components
const Modal = loadable(() => import('@mui/material/Modal'));

const renderColse = (btnCloseType, onClose) => {
    switch (btnCloseType) {
        case 1: return (<button className="popup_close" onClick={onClose} aria-label="Close popup">
            <i className="icon-xmark" />
        </button>);

        default: return <></>;
    }
};

const Popup = ({ open, onClose, children, popupClass, rootClass = "", popupBg = null, btnCloseType = 1, timeout = 500, zIndex = -1 }) => {
    let sx = {};
    if (zIndex > -1) sx.zIndex = zIndex;

    return (
        <Modal open={open} onClose={onClose} closeAfterTransition sx={sx}>
            <Fade in={open} timeout={500}>
                <div className={`popup-container ${rootClass}`}>
                    {/*<ClickAwayListener onClickAway={onClose}>*/}
                    <Grow in={open} timeout={timeout}>
                        <div className={`${popupClass || ''} popup popup-window card card-padded`} style={{ minHeight: 'unset' }}>
                            {popupBg && <img src={popupBg} className='popup-bg' />}
                            {renderColse(btnCloseType, onClose)}
                            {children}
                        </div>
                    </Grow>
                    {/*</ClickAwayListener>*/}
                </div>
            </Fade>
        </Modal>
    );
};

Popup.propTypes = {
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
    children: PropTypes.node.isRequired,
    popupClass: PropTypes.string,
    showBtnClose: PropTypes.number
};

export default Popup;
