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

import CajaTexto from '../cajaTexto/cajaTexto.jsx'
import TablaFiltro from '../tablaFiltro/tablaFiltroSort.jsx';
import Botones from '../botonera/headerBotones.js'
import ComboBox from '../comboBox/combobox.jsx';
import MonthYearPicker from '../dataPicker/monthYearPicker.jsx';
import TextArea from '../textArea/textArea.jsx';

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

    render() {
        const { id, columnas, datos, selectRow, rowStyle, cellEdit, botones, handleSelectTipo, 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-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'>
                                <ComboBox id="SelectedTipo" col="6" attributes={this.props.elementos.Tipo.attributes} value={this.props.selectedTipo} label={this.props.elementos.Tipo.attributes.label} datos={this.props.listaTipo} onChange={this.props.handleCambioTipo} />
                                <MonthYearPicker id="fecMesAno" col="6" pvalue={this.props.elementos.fecMesAno.value} attributes={this.props.elementos.fecMesAno.attributes} label={this.props.elementos.fecMesAno.attributes.label} handleChange={this.props.onhandleChangeDate} />
                            </div>

                            <div className='row'>
                                <TextArea id='Descripcion' col='12' value={this.props.elementos.Descripcion.value} label={this.props.elementos.Descripcion.attributes.label} attributes={this.props.elementos.Descripcion.attributes} onChangeInput={this.props.onChangeInput} rows='3' />
                            </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 ModalCargaAsiento;