import TabGroup, { Tab } from "@/components/tab/TabGroup";
import { useGetRaidGroup } from "@/hooks/RaidGroupHooks";
import { RaidGroup } from "@/interface/RaidGroup";
import RaidGroupCalendarDisplay from "@/ui/calendar/RaidGroupCalendarDisplay";
import RaidGroupHeader from "@/ui/calendar/RaidGroupHeader";
import ClassGroupsTab from "@/ui/classGroup/ClassGroupsTab";
import PersonTab from "@/ui/person/PersonTab";
import { useEffect, useState } from "react";
import { Navigate, useParams } from "react-router";


export default function RaidGroupPage(){
	const { raidGroupId } = useParams();


	const [ raidGroup, setRaidGroup ] = useState<RaidGroup>();
	const raidGroupQuery = useGetRaidGroup(raidGroupId ?? "", false);
	useEffect(() => {
		if(raidGroupQuery.status === "success"){
			setRaidGroup(raidGroupQuery.data);
		}
	}, [ raidGroupQuery ]);


	if(raidGroupQuery.status === "pending"){
		return (
			<div>Loading...</div>
		);
	}
	else if(raidGroupQuery.status === "error"){
		return (
			<div>Error</div>
		);
	}
	else if(raidGroupQuery.status === "success" && raidGroupQuery.data === undefined){
		return (
			<Navigate to="/raidGroup"/>
		);
	}
	else if(raidGroup){
		const tabs: Tab[] = [
			{
				tabHeader: "Calendar",
				tabContent: <RaidGroupCalendarDisplay gameId={raidGroup?.gameId ?? ""} raidGroupId={raidGroupId!}/>
			},
			{
				tabHeader: "People",
				tabContent: <PersonTab raidGroup={raidGroup}/>
			},
			{
				tabHeader: "Class Groups",
				tabContent: <ClassGroupsTab raidGroup={raidGroup}/>
			}
		];


		return (
			<main
				className="flex flex-col items-center justify-center"
			>
				<RaidGroupHeader
					raidGroup={raidGroup}
				/>
				<TabGroup
					tabs={tabs}
				/>
			</main>
		);
	}
}