import React, { Fragment, memo, useEffect, useState, useRef } from 'react';
import { useHistory, withRouter } from 'react-router-dom';
import Botones from '../../components/UI/botonera/headerBotones.js';
import FrmBotones from '../../components/UI/botonera/formBotones.jsx'
import DatePicker from '../../components/UI/dataPicker/dataPicker.jsx';
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 ListaDatos from '../../components/UI/listaDatosBusqueda/index.jsx'

function ConciliacionAuxiliaresInt(props) {
    return (
        <Fragment>
            <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="cmbTipoAs" col="6" attributes={props.Datos.Modulo.attributes} value={props.selectedModulo} label={props.Datos.Modulo.attributes.label} datos={props.listaModulos} onChange={props.onhandleSelectedModulo} />
                            <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">
                            {/**
                             *                            <div className="col-sm-4 col-md-4">
                                <div id="master-tabla" className="table-responsive col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <TablaFiltro
                                        columnas={props.columnasDesc}
                                        datos={props.listaDatosDesc}
                                        keyField={'ID'}
                                        selectRow={props.selectRowDesc}
                                        nombreCSV={"Cuentas Conciliación"}
                                        botonesLista={[]}
                                        botones={true}
                                        busqueda={true}
                                    />
                                </div>
                            </div>
 
                             */}

                            <div className="col-sm-4 col-md-4">

                                {/**
                                 * 
                                 */}

                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <td>
                                                <div className="checkboxFive">
                                                    <input type="checkbox" onClick={(evt) => { props.onRowSelectAllCuent(evt) }} value={"-1"} checked={props.checkAl} id={`checkboxFiveInput${-1}`} name="" />
                                                    <label for={`checkboxFiveInput${-1}`}></label>
                                                </div>
                                                <p className='FontSZ'>Cuentas</p>
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {props.listaDatosDesc.length > 0
                                            ?
                                            props.listaDatosDesc.map((item, id) => (
                                                <tr>
                                                    <td>
                                                        <div className="checkboxFive">
                                                            <input type="checkbox" onClick={(evt) => { props.onRowSelectCuent(evt, item) }} value={id} checked={props.filaSeleccionada.includes(item.ID)} id={`checkboxFiveInput${id}`} name="" />
                                                            <label for={`checkboxFiveInput${id}`}></label>
                                                        </div>
                                                        <p>{item.Descripcion}</p>
                                                        <p>{item.Cuenta}</p>
                                                        <p>{item.Nombre}</p>
                                                    </td>
                                                </tr>
                                            ))
                                            :
                                            <tr>
                                                <td>
                                                    <p>No hay datos que mostrar.</p>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>


                            <div className="col-sm-8 col-md-8">
                                <div id="master-tabla" className="table-responsive col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <TablaFiltro
                                        columnas={props.columnasDoc}
                                        datos={props.listaDatosDoc}
                                        keyField={'Tipo'}
                                        selectRow={props.selectRowDoc}
                                        nombreCSV={"Datos Conciliación"}
                                        botonesLista={[]}
                                        botones={true}
                                        busqueda={true}
                                        modo={props.cellEdit}
                                        muestraTodo={true}
                                    />
                                </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={props.columnasDoc}
                                        datos={props.listaDatosDoc}
                                        keyField={'Tipo'}
                                        selectRow={props.selectRowDoc}
                                        nombreCSV={"Datos Conciliación"}
                                        botonesLista={[]}
                                        botones={true}
                                        busqueda={true}
                                        modo={props.cellEdit}
                                    />
                                </div>
                            </div>
                        </div>
                         */}

                    </div>
                </div>
            </div>

        </Fragment>
    );
};
export default (withRouter(memo(ConciliacionAuxiliaresInt)));