mister-webdev / movie-app

import { FC } from 'react'

import { useStore } from 'effector-react'

import { useQueryClient } from 'react-query'

import { prevPage, nextPage, setPage, $page, $isAscending } from './model'

import { usePagination, DOTS } from './usePagination'

import { useCustomEventDetail } from 'shared/hooks/useCustomEventDetail'

import { fetchMoviesList } from 'entities/MoviesCardsGrid/model'

import { Text } from 'shared/ui'

import { IPagination } from './types'

import clsx from 'clsx'

import styles from './Pagination.module.scss'

  const isAscending = useStore($isAscending)

  const currentPage = useStore($page)

  const totalPages = useCustomEventDetail('gotTotalPages')

  const queryClient = useQueryClient()

  const prefetchPage = async (pageParam: number) => {

    await queryClient.prefetchQuery(['moviesList', pageParam], () =>

      fetchMoviesList(pageParam),

    )

  }

  const paginationRange = usePagination({

    currentPage,

    totalPages,

    siblingCount,

  }) as number[]

  if (currentPage === 0 || paginationRange?.length < 2) {

    return null

  }

  return (

            [styles['disabled']]: currentPage === 1,

          })}

        >

        </li>

          if (pageNumber === DOTS) {

            return (

                ...

              </li>

            )

          }

          return (

                [styles['paginationForward']]:

                  pageNumber > 1 && pageNumber < totalPages && isAscending,

                [styles['paginationBackward']]:

                  pageNumber > 1 && pageNumber < totalPages && !isAscending,

                [styles['selected']]: pageNumber === currentPage,

              })}

            >

            </li>

          )

        })}

            [styles['disabled']]: currentPage === totalPages,

          })}

        >

        </li>

      </ul>

    </div>

  )

}

export { Pagination }