import React, { Component, Fragment } from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';

// import LoaderHOC from '../../../HOC/LoaderHOC';

const customTotal = (from, to, size) => (
    <span className="react-bootstrap-table-pagination-total">
          Mostrando {from} a {to} de {size} Resultados
    </span>
);

const { ExportCSVButton } = CSVExport;
class listaDatos extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { id, datos, columnas, striped, hover, condensed, selectRow,Filtro } = this.props;
        const { SearchBar } = Search;
        const length = datos.length
        const optPaginacion = {
            paginationSize: 4,
            pageStartIndex: 1,
            alwaysShowAllBtns: true, // Always show next and previous button
            withFirstAndLast: true, // Hide the going to First and Last page button
            hideSizePerPage: false, // Hide the sizePerPage dropdown always
            hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
            firstPageText: 'Primero',
            prePageText: 'Anterior',
            nextPageText: 'Siguiente',
            lastPageText: 'Último',
            nextPageTitle: 'Primera Página',
            prePageTitle: 'Página Anterior',
            firstPageTitle: 'Siguiente Página',
            lastPageTitle: 'Última Página',
            showTotal: true,
            paginationTotalRenderer: customTotal,
            sizePerPageList: [{
                text: '10', value: 10
            }, {
                text: '25', value: 25
            }, {
                text: 'Todo', value: length>0?length:1
            }] // A numeric array is also available. the purpose of above example is custom the text
        };

        return (
            <ToolkitProvider
                keyField={id}
                data={datos}
                columns={columnas}
                search
            //exportCSV
            >
                {
                    props => (
                        <div>

                            <div className={'row filtro-div'}>
                                <SearchBar {...props.searchProps} className={'filtros col-md-6'} placeholder={'Buscar'} />
                                <select className="filtros select col-md-6" id='EdificioElegido' value={Filtro.PisoSelected} onChange={Filtro.OnChange}   >
                                    <option key='all' value='all'>Todos los Pisos</option>
                                     {Filtro._PisoOptions}
                                </select>

                            </div>

                            <BootstrapTable
                                bootstrap4
                                {...props.baseProps}
                                striped={striped}
                                hover={hover}
                                condensed={condensed}
                                selectRow={selectRow}
                                pagination={paginationFactory(optPaginacion)}
                            />
                        </div>
                    )
                }
            </ToolkitProvider>
        )

    }

};
export default listaDatos;
// export default LoaderHOC('datos')(listaDatos);