import React, { Fragment } from 'react';
import Modal from 'react-modal';

class modalSpinner extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {
        const { selectedModal, label, contentLabel, tipoSpinner } = this.props;
        const customStyles = {
            content: {
                position: 'fixed', position: 'absolute', top: '35%', left: '40%', right: '40%', bottom: '53%', with: '40%', height: '117px', padding: '5px', 'border-radius': '10px'
                //top: '50%',//left: '50%',//right: 'auto', //bottom: 'auto',//marginRight: '-50%',
                //transform: 'translate(-50%, -50%)',                
            },
            overlay: {
                backgroundColor: 'rgba(0, 0, 0, 0.75)', 'z-index': '1000'
                //backgroundColor: 'rgba(255, 255, 255, 0)',
            },

        };


        return (
            <Modal isOpen={selectedModal} contentLabel={contentLabel} style={customStyles} ariaHideApp={false}>
                {/*<div className="modal-header">
                    <h2 className="modal-title" id="exampleModalLabel">{label}</h2>
        </div>*/}
                <div className="modal-body">
                    <div className='row'>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                <div className={`loader${tipoSpinner}`}></div>
                            </div>
                            <div className="col-xs-8 col-sm-8 col-md-8 col-lg-8" style={{margin: '10px auto'}}>
                                <p className="text-center mt-5" style={{ fontSize: '1.5rem' }}>{label}</p>
                            </div>

                        </div>
                        {/*
                        <div className="col-12 text-center" style={{ fontSize: '60px' }}>
                            <i className="fas fa-spin"> spinner</i>
                        </div>

                        
                        <div className='loader2'> loader1</div>
                        <div className='loader2'> loader2</div>
                        <div className='loader3'> loader3</div>
                        <div className='loader4'> loader4</div>
                        <div className='loader5'> loader5</div>
                        <div className='loader6'> loader6</div>
                        <div className='loader7'> loader7</div>
                        <div className='loader8'> loader8</div>*/}
                    </div>
                </div>
                {/*<div className="modal-footer">

                    </div>*/}
            </Modal>
        )



    }
}
export default modalSpinner;