import { gql } from '@apollo/client';
import { Stack } from '@chakra-ui/react';
import { BooksListQuery } from '@generated/types';
import { useState } from 'react';
import { Pagination } from '../components/Pagination';
import { WorkingList } from '../components/WorkingList';
import { ListSearch } from '../components/ListSearch';
import { bookFragment } from '../fragments';
import { usePaginatedQuery } from '../hooks/usePaginatedQuery';
import { PaginatedListSkeleton } from './PaginatedListSkeleton';

export function BookSearchList() {
  const [workingSearchValue, setWorkingSearchValue] = useState<string>('');
  const [workingsListPage, setWorkingsListPage] = useState<number>(1);
  const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(10);
  const startIndex = (workingsListPage - 1) * workingsListPageSize;

  const { data } = usePaginatedQuery<BooksListQuery>({
    query,
    input: {
      filter: {
        terms: workingSearchValue,
        offset: startIndex,
        size: workingsListPageSize
      }
    }
  });

  return (
    <>
      <ListSearch placeholder="Search works..." onSubmit={value => setWorkingSearchValue(value)} />
      {data != null ? (
        <>
          <WorkingList workingsList={[...data.bookMany.items]} />
          {data.bookMany.total > workingsListPageSize && (
            <Stack justifyContent="center" alignItems="center">
              <Pagination
                total={data.bookMany.total}
                page={workingsListPage}
                setPage={setWorkingsListPage}
                pageSize={workingsListPageSize}
                setPageSize={setWorkingsListPageSize}
              />
            </Stack>
          )}
        </>
      ) : (
        <PaginatedListSkeleton />
      )}
    </>
  );
}

const query = gql`
  query BooksList($input: BookManyInput!) {
    bookMany(input: $input) {
      items {
        ...Book
      }
      total
    }
  }
  ${bookFragment}
`;