import React from 'react';
import Card from '@digigov/ui/content/Card';
import Grid from '@digigov/ui/layouts/Grid';
import {
  Pagination,
  PaginationList,
  PaginationLabel,
  PaginationResultsPerPageSelect,
  PaginationListItemButton,
} from '@digigov/ui/navigation/Pagination';
import usePagination from '@digigov/ui/navigation/Pagination/hooks';

const data: { id: number }[] = [];
const dataLength = 245;
for (let i = 0; i < dataLength; i++) {
  data.push({ id: i });
}

export const WithHook = (_: any) => {
  const resultsPerPageOptions: number[] = [10, 25, 40];
  const previousLabel = 'Προηγούμενη';
  const nextLabel = 'Επόμενη';
  const {
    registerPaginationLabel,
    registerPaginationResultsPerPageSelect,
    items,
    offset,
    limit,
  } = usePagination({
    total: data.length,
    resultsPerPageOptions: resultsPerPageOptions, // limitOptions
    previousLabel: previousLabel,
    nextLabel: nextLabel,
  });

  const filteredData = data.filter((item, index) => {
    console.log(item);
    return index > offset && index < offset + limit;
  });

  return (
    <>
      <Grid container spacing={4} marginBottom={8}>
        {filteredData.map((item, index) => {
          return (
            <Grid item xs={4} md={2} key={index}>
              <Card variant="border"> {item.id}</Card>
            </Grid>
          );
        })}
      </Grid>

      <Pagination>
        <PaginationLabel {...registerPaginationLabel()}></PaginationLabel>
        <PaginationResultsPerPageSelect
          {...registerPaginationResultsPerPageSelect()}
        >
          Αποτελέσματα ανά σελίδα{' '}
        </PaginationResultsPerPageSelect>
        <PaginationList>
          {items.map((item, index) => {
            return <PaginationListItemButton {...item} key={index} />;
          })}
        </PaginationList>
      </Pagination>
    </>
  );
};
export default WithHook;