import React, { Fragment } from 'react';
import Modal from 'react-modal';
import TablaFiltro from '../tablaFiltro/tablaFiltroSort.jsx';

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


    render() {
        const { selectedModal, datos, columnas, id, label, selectRow, rowStyle, cellEdit, botones,contentLabel } = this.props;
        const customStyles = {
            content: {
                position: 'fixed', position: 'absolute', top: '25%', left: '25%', right: '25%', bottom: '25%', with: '50%', height: '50%', padding: '5px'
                //top: '50%',//left: '50%',//right: 'auto', //bottom: 'auto',//marginRight: '-50%',
                //transform: 'translate(-50%, -50%)',                
            },
            overlay: {
                backgroundColor: 'rgba(0, 0, 0, 0.75)',
            },
        };
        return (
            <Modal isOpen={selectedModal} contentLabel={contentLabel} style={customStyles} ariaHideApp={false}>
                <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.props.cerrarModal}>
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2 className="modal-title" id="exampleModalLabel">{label}</h2>
                </div>
                <div className="modal-body">
                    <div className="row">
                        <div className="col-sm-12 col-md-12">
                            <div id="master-tabla" className="table-responsive  col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <TablaFiltro
                                    columnas={columnas}
                                    datos={datos}
                                    keyField={id}
                                    modo={cellEdit}
                                    rowEvents={this.props.rowEvents}
                                    selectRow={selectRow}
                                    rowStyle={rowStyle}
                                    verLHOC={this.props.verLHOC}
                                    botones={botones}
                                    busqueda={true}
                                />
                            </div>
                        </div>

                    </div>
                </div>
                <div className="modal-footer">
                    <button type="button" className="btn btnSecondaryStyle" data-dismiss="modal" onClick={this.props.cerrarModal}>Cerrar</button>
                </div>
            </Modal>
        )



    }
}
export default modalErrores;