import React, { memo } from 'react';
import {  withRouter } from 'react-router-dom';

import Botones from '../../components/UI/botonera/headerBotones.js';
import MonthYearPicker from '../../components/UI/dataPicker/monthYearPicker.jsx'
import ComboBox from '../../components/UI/comboBox/combobox.jsx';
import TablaFiltro from '../../components/UI/tablaFiltro/tablaFiltroSort.jsx';
import Division from '../../components/UI/division/division.jsx';

import TextArea from '../../components/UI/textArea/textArea.jsx';

import Config from "../../components/Util/constantes.js";

function cargaAsientoExcelInt(props) {
    return (
        <>
            <div className="col-md-12">
                <div className='row'>
                    <div className="col-md-6">
                        <h1>{props.titulo}</h1>
                    </div>
                    <div className="col-md-6 text-right">
                        <div className="acciones">
                            <Botones
                                botones={props.botones}
                            />
                        </div>
                    </div>
                </div>
                <div className="content">
                    <div className="content-box box-primary">
                        <div className='row'>
                            <ComboBox id="SelectedTipo" col="6" attributes={props.Datos.Tipo.attributes} value={props.selectedTipo} label={props.Datos.Tipo.attributes.label} datos={props.listaTipo} onChange={props.handleselectTipo} />
                            <MonthYearPicker id="fecMesAno" col="6" pvalue={props.Datos.fecMesAno.value} attributes={props.Datos.fecMesAno.attributes} label={props.Datos.fecMesAno.attributes.label} handleChange={props.onhandleChangeDate} />
                        </div>

                        <div className='row'>
                            <TextArea id='Descripcion' col='12' value={props.Datos.Descripcion.value} label={props.Datos.Descripcion.attributes.label} attributes={props.Datos.Descripcion.attributes} onChangeInput={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={props.columnas}
                                        datos={props.listaDatos}
                                        keyField={'Linea'}
                                        modo={props.cellEdit}
                                        selectRow={props.selectRow}
                                        nombreCSV={"Asientos"}
                                        botones={[]}
                                        botonesLista={[]}
                                        busqueda={true}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className='d-none'>
                <input type='file' id='ArchivoCarga' ref={props.hiddenFileInput} onChange={props.cargaArchivoExcel} />
            </div>
            <div className="row">
                <Division id="division" label={""} attributes={{}} />
            </div>
        </>
    );
}
export default (withRouter(memo(cargaAsientoExcelInt)));