"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">
            {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>
    )
}