"use client"

import Game from "@/components/game-item"
import { Card } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { IGame } from "@/types/igdb-types"
import { useInfiniteQuery } from "@tanstack/react-query"
import { useSearchParams } from "next/navigation"
import { Fragment } from "react"
import InfiniteScroll from "react-infinite-scroll-component"
import { Skeleton } from "./ui/skeleton"

export function InfiniteScrollGames() {
    const searchParams = useSearchParams()

    const searchQuery = searchParams.get('search')
    const categoryQuery = searchParams.get('category')
    const genreQuery = searchParams.get('genre')
    const platformQuery = searchParams.get('platform')
    const sortbyQuery = searchParams.get('sortby')
    const orderQuery = searchParams.get('order')

    const searchURL = searchQuery ? `&search=${searchQuery}` : ""
    const categoryURL = categoryQuery ? `&category=${categoryQuery}` : ""
    const genreURL = genreQuery ? `&genre=${genreQuery}` : ""
    const platformURL = platformQuery ? `&platform=${platformQuery}` : ""
    const sortbyURL = sortbyQuery ? `&sortby=${sortbyQuery}` : ""
    const orderURL = orderQuery ? `&order=${orderQuery}` : ""

    const params = searchURL + categoryURL + genreURL + platformURL + sortbyURL + orderURL

    const {
        status,
        data,
        error,
        fetchNextPage,
        hasNextPage,
    } = useInfiniteQuery(
        [params],
        async ({ pageParam = 1 }) =>
            await fetch(`/api/games/?page=${pageParam}${params}`,
            ).then((result) => result.json() as Promise<IGame[]>),
        {
            getNextPageParam: (lastPage, pages) => {
                return lastPage.length > 0 ? pages.length + 1 : undefined
            },
        },
    )

    return (
        <Card className="p-6 w-full h-full">
            {status === 'error'
                ?
                (<span className="text-center">
                    Uh oh... something went wrong
                </span>)
                :
                (status === 'success' && (
                    <InfiniteScroll
                        dataLength={data?.pages.length * 20}
                        next={fetchNextPage}
                        hasMore={hasNextPage ? true : false}
                        className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center"
                        loader={
                            <>
                                {Array.from({ length: 8 }, (_, i) => i + 1).map((i) => (
                                    <Skeleton key={i} className="aspect-[264/374] bg-gray-300 hidden lg:block" />
                                ))}
                                {Array.from({ length: 4 }, (_, i) => i + 1).map((i) => (
                                    <Skeleton key={i} className="aspect-[264/374] bg-gray-300 lg:hidden" />
                                ))}
                            </>
                        }
                        endMessage={
                            <div className="text-center">
                                <h1 className="font-bold text-2xl">Yay!<br />You have seen it all!</h1>

                            </div>
                        }
                    >
                        {data.pages.map((page, i) => (
                            <Fragment key={i}>
                                {page.map((game: IGame) => (
                                    <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
                                ))}
                            </Fragment>
                        ))}
                    </InfiniteScroll>
                ))}
        </Card>
    )
}