import React from 'react';
import Card from '@digigov/ui/content/Card';
import Container from '@digigov/ui/layouts/Basic/Container';
import Grid from '@digigov/ui/layouts/Grid';
import { Pagination } from '@digigov/ui/navigation/Pagination';
import {
  PaginationContextAuto,
  PaginationLabelAuto,
  PaginationListAuto,
  PaginationResultsPerPageSelectAuto,
  usePaginationContext,
} from '@digigov/ui/navigation/Pagination/auto';

const fetchedData: { id: number }[] = [];

for (let i = 0; i < 78; i++) {
  fetchedData.push({ id: i });
}

const DataGrid = ({ data }) => {
  const { offset, limit } = usePaginationContext();

  return (
    <Grid container spacing={4} mb={{ xs: 4, md: 8 }}>
      {data
        .filter((_item, index) => {
          return index > offset && index < offset + limit;
        })
        .map((item, index) => {
          return (
            <Grid item xs={4} md={2} key={index}>
              <Card variant="border" borderColor="light" dense>
                {item.id}
              </Card>
            </Grid>
          );
        })}
    </Grid>
  );
};

export const Auto = (_: any) => {
  return (
    <PaginationContextAuto
      total={fetchedData.length}
      resultsPerPageOptions={[15, 25]}
      previousLabel="Προηγούμενη"
      nextLabel="Επόμενη"
    >
      <Container grid={false}>
        <DataGrid data={fetchedData} />
        <Pagination>
          <PaginationLabelAuto />
          <PaginationResultsPerPageSelectAuto>
            Αποτελέσματα ανά σελίδα
          </PaginationResultsPerPageSelectAuto>
          <PaginationListAuto />
        </Pagination>
      </Container>
    </PaginationContextAuto>
  );
};
export default Auto;