import React from 'react';
import Modal from 'react-modal';

import TablaFiltro from '../../Tools/tablaFiltro/tablaFiltroSort';
import ComboBox from '../../toolBox/comboBox/combobox';


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

    render() {
        const {id,columnas,datos, selectRow,rowStyle,cellEdit,botones, datosFiltro, selectedModal,contentLabel, selectedOptionArea, selectedOptionDepto, selectedOptionSeccion, selectedOptionOficina, listaArea, listaDeptoFiltro, listaSeccionFiltro,
            listaOficinaFiltro,label, nombreCSV }= 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)',
            },
        };
        const rowEvents = {
            onDoubleClick: (e, row, rowIndex, cellEdit) => {
                onDoubleClick(e, row, rowIndex);
            }
        };
        const NoDatos = 'No hay datos que mostrar'
        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 className="row">
                                <ComboBox id="cmbarea" col="6" attributes={datosFiltro.Area.attributes} value={selectedOptionArea} label="Area" datos={listaArea} onChange={this.props.onhandleSelectedOptionArea} />
                                <ComboBox id="cmbdepto" col="6" attributes={datosFiltro.Depto.attributes} value={selectedOptionDepto} label="Departamento" datos={listaDeptoFiltro} onChange={this.props.onhandleSelectedOptionDepto} />


                            </div>
                            <div className="row">
                                <ComboBox id="cmbseccion" col="6" attributes={datosFiltro.Seccion.attributes} value={selectedOptionSeccion} label="Sección" datos={listaSeccionFiltro} onChange={this.props.onhandleSelectedOptionSeccion} />
                                <ComboBox id="cmboficina" col="6" attributes={datosFiltro.Oficina.attributes} value={selectedOptionOficina} label="Oficina" datos={listaOficinaFiltro} onChange={this.props.onhandleSelectedOptionOficina} />

                            </div>
                        </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}
                                    nombreCSV={nombreCSV}
                                />
                            </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 modalBusquedaEmpleado;