"use client"

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

export default function AddGameToFinishedList(props: { gameId: string, user: User }) {

    const router = useRouter();
    const gameId = parseFloat(props.gameId);
    const user = props.user;

    let formData: {
        id: String;
        gameId: Number;
        add: boolean;
        planningGameList: number[] | undefined;
        playingGameList: number[] | undefined;
        finishedGameList: number[] | undefined;
    } = {
        id: "",
        gameId: -1,
        add: true,
        planningGameList: undefined,
        playingGameList: undefined,
        finishedGameList: undefined
    };

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

        formData.id = user.id;
        formData.finishedGameList = props.user.finishedGameList.filter((id) => id !== gameId)
        console.log(formData.finishedGameList)
        const response = await fetch('/api/gamelists', {
            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.id = user.id;
        props.user.finishedGameList.push(gameId)
        formData.finishedGameList = props.user.finishedGameList;
        const response = await fetch('/api/gamelists', {
            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.user.finishedGameList.includes(parseFloat(props.gameId))) {
            button = (
                <form onSubmit={addGame}>
                    <Button type="submit" size="lg">
                        Add Game To finished-playing-List
                    </Button>
                </form>
            )
        } else {
            button = (
                <form onSubmit={removeGame}>
                    <Button type="submit" size="lg" variant={"secondary"}>
                        Remove Game From finished-playing-List
                    </Button>
                </form>
            )
        }
    } catch (error) {
        throw new Error("Failed to check finished-playing-List");
    }

    return (
        button
    )
}