"use client"

import { Post, Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition, useEffect, useState } from "react";

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" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
                        AddGame
                    </button>
                </form>
            )
        } else {
            button = (
                <form onSubmit={removeGame}>
                    <button type="submit" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
                        Remove Game
                    </button>
                </form>
            )
        }
    } catch (error) {

    }

    return (
        button
    )
}