import React from 'react';
import { gql } from '@apollo/client';

import Pager from 'components/Pager';
import Decks from '../components/Decks';

export const decksQuery = gql`
  query decksPage(
    $orderBy: DeckOrderBy
    $skip: Int
    $filter: DeckFilter
    $first: Int
  ) {
    decks(skip: $skip, filter: $filter, orderBy: $orderBy, first: $first) {
      ...Decks
    }
    decksMeta(filter: $filter) {
      count
    }
  }
  ${Decks.fragments.decks}
`;

const DecksContainer = ({
  showTotals,
  filter,
  orderBy = 'created_at_DESC'
}) => (
  <Pager
    query={decksQuery}
    variables={{
      first: 9,
      filter,
      orderBy
    }}
    countPath="decksMeta.count"
    itemsPath="decks"
    updateQuery={data => ({
      decks: {
        $push: data.decks
      }
    })}
    children={({ data, totalCount }) => (
      <Decks
        decks={data.decks}
        totalCount={totalCount}
        showTotals={showTotals}
      />
    )}
  />
);

export default DecksContainer;