import React from 'react';
import Modal from 'react-modal';
import Table from '../TableFilter/index.jsx';

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



    render() {
        const { selectedModal, contentLabel, listaFiltro, columnas, keyRow, label } = this.props;
        const customStyles = {
            content: {
                position:'fixed',
                position:'absolute',
                top: '25%',
                left: '25%',
                right: '25%',
                bottom: '25%',                 
                //top: '50%',
                //left: '50%',
                //right: 'auto',
                with: '50%',
                height: '67%',                
                //bottom: 'auto',
                //marginRight: '-50%',
                //transform: 'translate(-50%, -50%)',
                padding: '5px'
            },
            overlay: {
                backgroundColor: 'rgba(0, 0, 0, 0.75)',
              },            
        };
        return (
            <Modal
                isOpen={selectedModal}
                contentLabel={contentLabel}
                style={customStyles}
                ariaHideApp={false}
            >
                <div className="">
                    <div className="">
                        <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-md-12">
                                    <input type="text" className="form-control" name="Buscar" placeholder="Buscar..." onChange={this.props.handleChangeSearch}></input>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-md-12">
                                    <div className="">
                                        <div className="">
                                            <Table
                                                dataRows={listaFiltro}
                                                dataColumns={columnas}
                                                id={'tblBusquedas'}
                                                keyRow={keyRow}
                                                onSelectedRow={this.props.onSelectedRow}
                                                rowsSelected={this.props.rowsSelected}
                                                onDoubleClick={this.props.seleccionModal}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btnSecondaryStyle" data-dismiss="modal" onClick={this.props.cerrarModal}>Cerrar</button>
                            <button type="button" className="btn btn-primary" onClick={this.props.seleccionModal}>Seleccionar</button>
                        </div>
                    </div>
                </div>
            </Modal>
        )



    }
}
export default modalBusqueda;