import React, { Fragment, useState,useRef,useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
import ListaDatos from '../../../components/UI/listaDatosBusqueda/index.jsx'

function tablaSaldos(props) {
    const { eventLeft, eventRight, DatoNav, col } = props;
    const stiloSig = { display: !!DatoNav.attributes.hiddenSig ? DatoNav.attributes.hiddenSig : 'unset' };
    const stiloAtras = { display: !!DatoNav.attributes.hiddenAtras ? DatoNav.attributes.hiddenAtras : 'unset' };
    const [datosT, setDatosT] =useState([]);
    //console.log(`stiloSig : ${JSON.stringify(stiloSig)} DatosNav ${DatoNav.attributes.hiddenSig}`);
    //console.log(`props.columnasTabla : ${JSON.stringify(props.columnasTabla)},  props.datos: ${JSON.stringify(props.datos)}`);
    const mounted = useRef();
    useEffect(() => {
      if (!mounted.current) {
        // do componentDidMount logic
        //setDatosT([]);
        mounted.current = true;
      } else {
        //setDatosT(props.datos);

        //console.log(`6tablaSaldos useEffect : datosT : ${JSON.stringify(datosT)}`);
        //console.log(`6tablaSaldos useEffect : props.datos : ${JSON.stringify(props.datos)}`);
      }
    });


    return (
        <Fragment>
            <div className={"col-sm-" + col + " col-md-" + col}>
                <div className="col-md-12">
                    <div className="table-date-catalog mb-2">
                        <i style={{ display: 'unset' }} onClick={eventLeft}><FontAwesomeIcon icon={faArrowLeft} /></i>
                        <div>
                            {DatoNav.value}
                        </div>
                        <i style={stiloSig} onClick={eventRight}><FontAwesomeIcon icon={faArrowRight} /></i>
                    </div>
                    <div className="big-table table-catalog">
                        <ListaDatos
                            id={props.id}
                            datos={props.datos}
                            columnas={props.columnasTabla}
                            striped={false}
                            hover={true}
                            condensed={false}
                            selectRow={props.selectRow}
                            onDoubleClick={props.onDoubleClick}
                            borrar={props.borrando}
                            verLHOC={false}
                        />
                    </div>
                </div>
            </div>
        </Fragment>
    );
};
export default tablaSaldos;