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

import CajaTexto from '../../UI/cajaTexto/cajaTexto.jsx'
import TablaFiltro from '../tablaFiltro/tablaFiltroSort.jsx';
import Botones from '../botonera/headerBotones.js'


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

    render() {
        const { id, columnas, datos, selectRow, rowStyle, cellEdit, botones, datosFiltro, selectedModal, contentLabel,
            label, botonesExcel } = this.props;
        const customStyles = {
            content: {
                position: 'fixed',
                position: 'absolute',
                top: '18%',
                left: '10%',
                right: '10%',
                bottom: '25%',
                //top: '50%',
                //left: '50%',
                //right: 'auto',
                with: '50%',
                height: '70%',
                //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">
                                <CajaTexto col="4" id="ingDed" type="text" label={datosFiltro.IngDedNombre.attributes.label} value={datosFiltro.IngDedNombre.value} attributes={datosFiltro.IngDedNombre.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="4" id="creacionUsua" type="text" label={datosFiltro.creacionUsua.attributes.label} value={datosFiltro.creacionUsua.value} attributes={datosFiltro.creacionUsua.attributes} onChangeInput={() => { }} />
                                <CajaTexto id="fechaCrea" col="4" value={datosFiltro.fechaCrea.value} attributes={datosFiltro.fechaCrea.attributes} label={datosFiltro.fechaCrea.attributes.label} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <CajaTexto col="4" id="estado" type="text" label={datosFiltro.EstadoStr.attributes.label} value={datosFiltro.EstadoStr.value} attributes={datosFiltro.EstadoStr.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="4" id="aplicaUsua" type="text" label={datosFiltro.aplicaUsua.attributes.label} value={datosFiltro.aplicaUsua.value} attributes={datosFiltro.aplicaUsua.attributes} onChangeInput={() => { }} />
                                <CajaTexto id="fechaApl" col="4" value={datosFiltro.fechaApl.value} attributes={datosFiltro.fechaApl.attributes} label={datosFiltro.fechaApl.attributes.label} onChangeInput={() => { }} />
                            </div>
                        </div>
                         */}

                        <div className="modal-body">
                            <div className='row'>
                                <div className="col-md-6">
                                    <h1>{label}</h1>
                                </div>
                                <div className="col-md-6 text-right">
                                    <div className="acciones">
                                        <Botones
                                            botones={botones}
                                        />
                                    </div>
                                </div>
                            </div>
                            <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}
                                            verLHOC={this.props.verLHOC}
                                            busqueda={true}
                                            nombreCSV={"CargaExcelPresupuesto"}
                                        />
                                    </div>
                                </div>

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

                        </div>
                    </div>
                </div>
            </Modal>
        )



    }
}
export default ModalPresupuesto;