"use client";
import { GameListRep, searchGameListApi, SearchProps } from "@/api/home";
import Box from "@/components/Box";
import GroupCard from "@/components/Card/GroupCard";
import { Pagination } from "@/types";
import { useSetState } from "ahooks";
import { InfiniteScroll } from "antd-mobile";
import { FC, useRef } from "react";
interface Props {
    searchParams: { gameListFlag: string };
}

const GameListFlag: FC<Props> = (props) => {
    const { searchParams } = props;

    const [target, setTarget] = useSetState<{ games: GameListRep[]; page: Partial<Pagination> }>({
        games: [],
        page: { is_end: false },
    });
    const params = useRef<SearchProps>({
        current_page: 0,
        page_size: 15,
        use_page: true,
        provider_id: +searchParams.gameListFlag,
    });
    const getGames = async (): Promise<GameListRep[] | undefined> => {
        return searchGameListApi(params.current).then((res) => {
            if (res.code === 200) {
                setTarget((value) => ({ page: res.page, games: [...value.games, ...res.data] }));
                return res.data;
            }
        });
    };
    const loadMore = async () => {
        params.current.current_page += 1;
        await getGames();
    };
    return (
        <Box>
            <GroupCard data={target.games} row={1} />
            <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
        </Box>
    );
};

export default GameListFlag;
