import { ButtonProps } from "@/components/button/Button";
import ClassGroupsByRaidLayoutDisplay from "@/components/classGroup/ClassGroupsByRaidLayoutDisplay";
import Table from "@/components/table/Table";
import { useGetClassGroupsByRaidLayout } from "@/hooks/ClassGroupHooks";
import { ClassGroup } from "@/interface/ClassGroup";
import { RaidGroup } from "@/interface/RaidGroup";
import { RaidLayout } from "@/interface/RaidLayout";
import { useAuth } from "@/providers/AuthProvider";
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
import { useEffect, useState } from "react";
import DeleteRaidLayoutModal from "./modal/DeleteRaidLayoutModal";
import RaidLayoutModal from "./modal/RaidLayoutModal";
import RaidLayoutAdminButtons from "./RaidLayoutAdminButtons";


export default function RaidLayoutList({
	raidLayouts,
	raidGroup
}:{
	raidLayouts: RaidLayout[];
	raidGroup: RaidGroup;
}){
	const { accountPermissions, raidGroupPermissions } = useAuth();
	const [ selectedRaidLayout, setSelectedRaidLayout ] = useState<RaidLayout>();
	const [ displayEditRaidLayoutModal, showEditRaidLayoutModal ] = useState(false);
	const [ displayDeleteRaidLayoutModal, showDeleteRaidLayoutModal ] = useState(false);
	const [ selectedLayoutClassGroups, setSelectedLayoutClassGroups ] = useState<(ClassGroup | null)[]>([]);

	const classGroupsQuery = useGetClassGroupsByRaidLayout(raidGroup.raidGroupId ?? "", selectedRaidLayout?.raidLayoutId);
	useEffect(() => {
		setSelectedLayoutClassGroups(classGroupsQuery.data ?? []);
	}, [ classGroupsQuery.data ]);


	const buttonProps: ButtonProps = {
		variant: "ghost",
		size: "md",
		shape: "square",
		disabled: !isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)
	};


	const headElements: React.ReactNode[] = [
		<div
			key="name"
			className="text-nowrap"
		>
			Raid Layout Name
		</div>,
		<div
			key="size"
			className="text-nowrap"
		>
			Raid Size
		</div>,
		<div
			key="classGroups"
			className="text-nowrap"
		>
			Class Groups
		</div>,
		<div
			key="actions"
			className="pl-16"
		>
			Actions
		</div>
	];

	const bodyElements: React.ReactNode[][] = raidLayouts.map((raidLayout) => [
		<div key="name">
			{raidLayout.raidLayoutName}
		</div>,
		<div key="size">
			{raidLayout.raidSize}
		</div>,
		<div key="classGroups">
			<ClassGroupsByRaidLayoutDisplay raidGroupId={raidGroup.raidGroupId ?? ""} raidLayoutId={raidLayout.raidLayoutId ?? ""}/>
		</div>,
		<div
			key="actions"
			className="flex flex-row items-center justify-center gap-2 pl-16"
		>
			<div
				className="py-4 border-l border-neutral-500"
			>
				&nbsp;
			</div>
			<RaidLayoutAdminButtons
				raidLayout={raidLayout}
				buttonProps={buttonProps}
				showRaidLayoutModal={() => { setSelectedRaidLayout(raidLayout); showEditRaidLayoutModal(true); }}
				showDeleteRaidLayoutModal={() => { setSelectedRaidLayout(raidLayout); showDeleteRaidLayoutModal(true); }}
			/>
		</div>
	]);


	return (
		<>
			<Table
				tableHeadElements={headElements}
				tableBodyElements={bodyElements}
			/>
			<RaidLayoutModal
				display={displayEditRaidLayoutModal}
				close={() => { showEditRaidLayoutModal(false); setSelectedRaidLayout(undefined); }}
				raidLayout={selectedRaidLayout}
				raidGroup={raidGroup}
				selectedClassGroups={selectedLayoutClassGroups}
			/>
			<DeleteRaidLayoutModal
				display={displayDeleteRaidLayoutModal}
				close={() => { showDeleteRaidLayoutModal(false); setSelectedRaidLayout(undefined); }}
				raidLayout={selectedRaidLayout}
			/>
		</>
	);
}