import DangerMessage from "@/components/message/DangerMessage";
import TabGroup, { Tab } from "@/components/tab/TabGroup";
import TutorialComponent from "@/components/TutorialComponent";
import { useGetRaidGroup } from "@/hooks/RaidGroupHooks";
import { TutorialStatus } from "@/interface/AccountTutorialStatus";
import { RaidGroup } from "@/interface/RaidGroup";
import { useAuth } from "@/providers/AuthProvider";
import RaidGroupAccountsTab from "@/ui/account/RaidGroupAccountsTab";
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 RaidGroupRequestTab from "@/ui/raidGroupRequest/RaidGroupRequestTab";
import RaidInstanceTab from "@/ui/raidInstance/RaidInstanceTab";
import RaidLayoutTab from "@/ui/raidLayout/RaidLayoutTab";
import { isRaidGroupAdmin } from "@/util/PermissionUtil";
import { raidGroupTutorialSteps } from "@/util/TutorialUtil";
import { useEffect, useState } from "react";
import { Navigate, useParams } from "react-router";


export default function RaidGroupPage(){
	const { raidGroupId } = useParams();
	const { accountPermissions, raidGroupPermissions, tutorialsStatus, setTutorialsStatus } = useAuth();

	const [ raidGroup, setRaidGroup ] = useState<RaidGroup>();


	const raidGroupQuery = useGetRaidGroup(raidGroupId ?? "", false);

	useEffect(() => {
		if(raidGroupQuery.status === "success"){
			setRaidGroup(raidGroupQuery.data);
		}
	}, [ raidGroupQuery ]);


	const updateRaidGroupTutorialStatus = () => {
		const newTutorialsStatus = { ...tutorialsStatus };
		if(tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.COMPLETED){
			newTutorialsStatus.raidGroupTutorialStatus = TutorialStatus.NOT_COMPLETED;
		}
		else if(tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.NOT_COMPLETED){
			newTutorialsStatus.raidGroupTutorialStatus = TutorialStatus.COMPLETED;
		}
		setTutorialsStatus(newTutorialsStatus);
	}


	if(raidGroupQuery.status === "pending"){
		return (
			<div>Loading...</div>
		);
	}
	else if(raidGroupQuery.status === "error"){
		return (
			<DangerMessage>Error {raidGroupQuery.error.message}</DangerMessage>
		);
	}
	else if(raidGroupQuery.status === "success" && raidGroupQuery.data === undefined){
		return (
			<Navigate to="/raidGroup"/>
		);
	}
	else if(raidGroup){
		const tabs: Tab[] = [
			{
				tabId: "calendarTab",
				tabHeader: "Calendar",
				tabContent: <RaidGroupCalendarDisplay gameId={raidGroup?.gameId ?? ""} raidGroupId={raidGroupId!}/>
			},
			{
				tabId: "peopleTab",
				tabHeader: "People",
				tabContent: <PersonTab raidGroup={raidGroup}/>
			},
			{
				tabId: "classGroupsTab",
				tabHeader: "Class Groups",
				tabContent: <ClassGroupsTab raidGroup={raidGroup}/>
			},
			{
				tabId: "raidLayoutsTab",
				tabHeader: "Raid Layout",
				tabContent: <RaidLayoutTab raidGroup={raidGroup}/>
			},
			{
				tabId: "instancesTab",
				tabHeader: "Raid Instances",
				tabContent: <RaidInstanceTab raidGroup={raidGroup}/>
			}
		];

		if(isRaidGroupAdmin(raidGroupId!, raidGroupPermissions, accountPermissions)){
			tabs.push({
				tabId: "usersTab",
				tabHeader: "Users",
				tabContent: <RaidGroupAccountsTab raidGroup={raidGroup}/>
			});
			tabs.push({
				tabId: "requestsTab",
				tabHeader: "Requests",
				tabContent: <RaidGroupRequestTab raidGroup={raidGroup}/>
			});
		}


		return (
			<main
				className="flex flex-col items-center justify-center gap-y-8"
			>
				<TutorialComponent
					steps={raidGroupTutorialSteps}
					run={tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.NOT_COMPLETED}
					showProgress={true}
					showSkipButton={true}
					continuous={true}
					disableScrolling={true}
					updateFunction={updateRaidGroupTutorialStatus}
				/>
				<RaidGroupHeader
					raidGroup={raidGroup}
				/>
				<TabGroup
					tabs={tabs}
				/>
			</main>
		);
	}
}