import { gql } from '@apollo/client';
import { Skeleton, Stack } from '@chakra-ui/react';
import { WorkingListQuery } from '@generated/types';
import { createFileRoute } from '@tanstack/react-router';
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 const Route = createFileRoute('/')({
  component: RouteComponent
});

function RouteComponent() {
  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<WorkingListQuery>({
    query,
    input: {
      filter: {
        terms: workingSearchValue,
        offset: startIndex,
        size: workingsListPageSize
      }
    }
  });

  return (
    <Stack justifyContent="center" alignItems="center">
      <Stack width="90%">
        <WorkingListSearch
          value={workingSearchValue}
          onSubmit={value => {
            alert(value);
          }}
          onChange={value => setWorkingSearchValue(value)}
        />

        {data != null ? (
          <>
            <WorkingList
              workingsList={data.workingMany.items.map(item => ({
                ...item,
                chaptersTotal: item.chapters.total,
                reviewsTotal: item.reviews.total
              }))}
            />

            <Pagination
              total={data.workingMany.total}
              page={workingsListPage}
              setPage={setWorkingsListPage}
              pageSize={workingsListPageSize}
            />
          </>
        ) : (
          <Skeleton />
        )}
      </Stack>
    </Stack>
  );
}

const query = gql`
  query WorkingList($input: WorkingManyInput!) {
    workingMany(input: $input) {
      items {
        id
        title
        description
        author {
          id
          username
        }
        progressStatus
        updatedAt
        chapters {
          total
        }
        wordsTotal
        ratingTotal
        reviews {
          total
        }
      }
      total
    }
  }
`;

// const workingData1: WorkingCardProps = {
//   id: '1',
//   title: 'Worth the Candle',
//   description: `A teenager struggling after the death of his best friend finds himself in a fantasy
//               world - one which seems to be an amalgamation of every Dungeons and Dragons campaign
//               they ever played together. Now he's stuck trying to find the answers to why he's there
//               and what this world is trying to say. The most terrifying answer might be that this
//               world is an expression of the person he was back on Earth.`,
//   author: {
//     id: '1',
//     createdAt: '12.8.2025',
//     updatedAt: '4.9.2025',
//     username: 'AlexanderWhales'
//   },
//   progressStatus: WorkingProgressStatus.Finished,
//   updatedAt: '20.10.2025',
//   chaptersTotal: 10,
//   wordsTotal: 34000,
//   ratingTotal: 10,
//   reviewsTotal: 3
// };
//
// const workingData2: WorkingCardProps = {
//   id: '2',
//   title: 'Test',
//   description: `Description.`,
//   author: {
//     id: '1',
//     createdAt: '12.8.2025',
//     updatedAt: '4.9.2025',
//     username: 'JohnSmith'
//   },
//   progressStatus: WorkingProgressStatus.InProgress,
//   updatedAt: '20.10.2025',
//   chaptersTotal: 10,
//   wordsTotal: 1200,
//   ratingTotal: -10,
//   reviewsTotal: 0
// };
//
// const mockWorkingData = {
//   total: 4,
//   items: [workingData1, workingData2, { ...workingData1, id: '3' }, { ...workingData2, id: '4' }]
// };
//