/**
 * this.props.options               = { backdrop: 'static', keyboard: false,....}
 * this.props.styles.modalDialog    = {key:value,.....}
 * this.props.classes.modalDialog   = "class1 class2"
 * this.props.hasHeader             = true*|false
 * 
 * */
class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.isUnmounted =false;
    }
    componentDidMount() {
        this.isUnmounted = false;
        var { options } = this.props;
        $(ReactDOM.findDOMNode(this)).modal({...(options|| {}) },'show');
        $(ReactDOM.findDOMNode(this)).on('hidden.bs.modal', this.props.handleHideModal);
    }
    componentWillUnmount = async () => {
        $(ReactDOM.findDOMNode(this)).modal('hide');
        this.isUnmounted = true;
    }
    render = () => {
        var { styles, classes, hasHeader, position, title } = this.props;
        var styleModalDialog = {
            ...(styles || {}).modalDialog || {}
        };
        var classModalDialog = (classes || {}).modalDialog || "";
        var center  = position || "";

        var { modalCenter: modalCenterStyle } = this.getStyles()
        return <React.Fragment>
            <div className="modal fade"
                tabIndex="-1" role="dialog"
                aria-labelledby="myLargeModalLabel"
                aria-hidden="true"
                style={{ display: "none" }}>
                <div className={`modal-dialog ${classModalDialog}`}
                    style={{...styleModalDialog, ...(center=='center' ? modalCenterStyle : {}) }} >
                    <div className="modal-content ui-resizable">
                        {!hasHeader ?
                            <React.Fragment /> :
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 className="modal-title" >{title}</h4>
                            </div>}
                        
                        <div className="modal-body">
                            {this.props.children}
                        </div>
                    </div>
                </div>
            </div>
        </React.Fragment>
    }
    getStyles = () => {
        return {
            modalCenter: {
                marginTop: '80px',
                marginBottom: 0,
                //height: '100vh',
                display: 'flex',
                //flexDirection: 'column',
                justifyContent: 'center',
                width:'90%'
            }
        }
    }
}


class ModlessModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    render = () => {
        return <Modal 
            options={{ backdrop: 'static', keyboard: false }}
            hasHeader={false}
            position={'center'}
            {...this.props}
        >{this.props.children}</Modal>
    }
}