import { gql } from '@apollo/client';
import { Skeleton, 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 { WorkingListSearch } from '../components/WorkingListSearch';
import { usePaginatedQuery } from '../hooks/usePaginatedQuery';

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

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

  return (
    <>
      {data != null ? (
        <>
          <WorkingListSearch
            onSubmit={value => {
              setWorkingSearchValue(value);
            }}
          />

          <WorkingList workingsList={[...data.bookMany.items]} />

          {data.bookMany.items.length != 0 && (
            <Pagination
              total={data.bookMany.total}
              page={workingsListPage}
              setPage={setWorkingsListPage}
              pageSize={workingsListPageSize}
            />
          )}
        </>
      ) : (
        <>
          <Stack direction="row" justifyContent="center" alignItems="center" gap={2}>
            <Skeleton height={10} width="80%" />
            <Skeleton height={10} width="calc(20% - 6px)" />
          </Stack>
          <Skeleton height={20} />
          <Skeleton height={20} />
          <Skeleton height={20} />
        </>
      )}
    </>
  );
}

const query = gql`
  query BooksList($input: BookManyInput!) {
    bookMany(input: $input) {
      items {
        id
        title
        description
        author {
          id
          username
        }
        updatedAt
        progressStatus
        ratingTotal
        reviewsTotal
        wordsTotal
        chaptersTotal
      }
      total
    }
  }
`;