"use client"

import { useRouter } from "next/navigation";
import { startTransition } from "react";
import { Button } from "./ui/button";

export default function AddGameToList(props: { userGameList: Number[], gameId: string }) {

    const router = useRouter();
    const gameId = props.gameId
    let formData = { gameId: "", add: true }

    async function removeGame(e: any) {
        e.preventDefault()

        formData.gameId = gameId;
        formData.add = false;
        const response = await fetch('http://localhost:3000/api/gameList', {
            method: 'PUT',
            body: JSON.stringify(formData)
        })

        startTransition(() => {
            // Refresh the current route and fetch new data from the server without
            // losing client-side browser or React state.
            router.refresh();
        });
        return await response.json()
    }

    async function addGame(e: any) {
        e.preventDefault()

        formData.gameId = gameId;
        formData.add = true;
        const response = await fetch('http://localhost:3000/api/gameList', {
            method: 'PUT',
            body: JSON.stringify(formData)
        })

        startTransition(() => {
            // Refresh the current route and fetch new data from the server without
            // losing client-side browser or React state.
            router.refresh();
        });
        return await response.json()
    }


    let button = <div></div>;
    try {
        if (!props.userGameList.includes(parseFloat(props.gameId))) {
            button = (
                <form onSubmit={addGame}>
                    <Button type="submit" size="lg">
                        Add Game To List
                    </Button>
                </form>
            )
        } else {
            button = (
                <form onSubmit={removeGame}>
                    <Button type="submit" size="lg" variant={"secondary"}>
                        Remove Game From List
                    </Button>
                </form>
            )
        }
    } catch (error) {
        throw new Error("Failed to fetch comments");
    }

    return (
        button
    )
}