import TabGroup, { Tab } from "@/components/tab/TabGroup";
import { useGetGame } from "@/hooks/GameHooks";
import { Game } from "@/interface/Game";
import GameCalendarDisplay from "@/ui/calendar/GameCalendarDisplay";
import GameHeader from "@/ui/game/GameHeader";
import GameClassDisplay from "@/ui/gameClass/GameClassDisplay";
import RaidGroupsByGameDisplay from "@/ui/raidGroup/RaidGroupsByGameDisplay";
import { useEffect, useState } from "react";
import { Navigate, useParams } from "react-router";


export default function GamePage(){
	const { gameId } = useParams();
	const tabs: Tab[] = [
		{
			tabHeader: "Calendar",
			tabContent: <GameCalendarDisplay gameId={gameId!}/>
		},
		{
			tabHeader: "Raid Groups",
			tabContent: <RaidGroupsByGameDisplay gameId={gameId!}/>
		},
		{
			tabHeader: "Classes",
			tabContent: <GameClassDisplay gameId={gameId!}/>
		}
	];

	const [ game, setGame ] = useState<Game>();
	const gameQuery = useGetGame(gameId ?? "", false);
	useEffect(() => {
		if(gameQuery.status === "success"){
			setGame(gameQuery.data);
		}
	}, [ gameQuery ]);


	if(gameQuery.status === "pending"){
		return (
			<div>Loading...</div>
		);
	}
	else if(gameQuery.status === "error"){
		return (
			<div>Error</div>
		);
	}
	else if(gameQuery.status === "success" && gameQuery.data === undefined){
		return (
			<Navigate to="/game"/>
		);
	}
	else if(game){
		return (
			<main
				className="flex flex-col items-center justify-center"
			>
				<GameHeader
					game={game}
				/>
				<TabGroup
					tabs={tabs}
				/>
			</main>
		);
	}
}