import React, { useEffect, useState } from 'react';
import { __ } from '@wordpress/i18n';

import translationStrings from '../../translationStringsForComponents';

// components
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import BandoService from '../../service/bando-service';

const DataTableAsync = () => {
    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
    const [items, setItems] = useState(null);
    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
    const [lazyState, setLazyState] = useState({
        first: 0,
        rows: 5,
        page: 1,
        sortField: null,
        sortOrder: null,
        filters: {
            name: { value: '', matchMode: 'contains' }
        }
    });

    const getPaginationQuery = () => {
        return {
            "globalFilters": {
                "page": 0,
                "limit": lazyState.rows,
                "sortBy": {
                    "columnName": "ID",
                    "sortDesc": true
                }
            }
        }
    }

    const onPage = (event) => {
        setLazyState(event);
    };

    const onSort = (event) => {
        setLazyState(event);
    };

    const onFilter = (event) => {
        event['first'] = 0;
        setLazyState(event);
    };

    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
            const { body, totalRecords, currentPage, totalPages, pageSize } = data.data;
            setTotalRecordsNum(totalRecords);
            const newItems = body.filter(o => o.status === 'PUBLISH');
            setItems(getFormattedBandiData(newItems));
        }
        setLocalAsyncRequest(false);
    }

    const errGetCallbacks = (data) => {
        setLocalAsyncRequest(false);
    }

    const getFormattedBandiData = (data) => {
        return [...(data || [])].map((d) => {
            d.start_date = new Date(d.dates[0]);
            d.end_date = new Date(d.dates[1]);

            return d;
        });
    };

    useEffect(() => {
        console.log(lazyState)
    }, [lazyState]);

    useEffect(() => {
        if (!localAsyncRequest) {
            setLocalAsyncRequest(true);
            const paginationQuery = getPaginationQuery();
            BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
        }
    }, []);

    return (
        <div className="appPageSection__table">
            <DataTable
                value={items} stripedRows showGridlines
                lazy filterDisplay="row" dataKey="id" paginator
                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
                emptyMessage={translationStrings.emptyMessage}>
                <Column field="name" filterField="name" filter
                        header={__('Nome Bando', 'gepafin')}
                        style={{ minWidth: '8rem' }}/>
            </DataTable>
        </div>
    )
}

export default DataTableAsync;