import { ButtonProps } from "@/components/button/Button";
import GameClassByClassGroupDisplay from "@/components/gameClass/GameClassByClassGroupDisplay";
import Table from "@/components/table/Table";
import { useGetGameClassesByClassGroup } from "@/hooks/GameClassHooks";
import { ClassGroup } from "@/interface/ClassGroup";
import { RaidGroup } from "@/interface/RaidGroup";
import { useState } from "react";
import ClassGroupButtons from "./ClassGroupButtons";
import ClassGroupModal from "./modal/ClassGroupModal";
import DeleteClassGroupModal from "./modal/DeleteClassGroupModal";


export default function ClassGroupList({
	classGroups,
	raidGroup
}:{
	classGroups: ClassGroup[];
	raidGroup: RaidGroup;
}){
	const [ selectedClassGroup, setSelectedClassGroup ] = useState<ClassGroup>();
	const [ displayClassGroupModal, setDisplayClassGroupModal ] = useState(false);
	const [ displayDeleteClassGroupModal, setDisplayDeleteClassGroupModal ] = useState(false);
	const gameClassesQuery = useGetGameClassesByClassGroup(selectedClassGroup?.classGroupId ?? "");


	const buttonProps: ButtonProps = {
		variant: "ghost",
		size: "md",
		shape: "square"
	};


	const headElements: React.ReactNode[] = [
		<div>
			Name
		</div>,
		<div>
			Classes
		</div>,
		<div
			className="pl-16"
		>
			Actions
		</div>
	];

	const bodyElements: React.ReactNode[][] = classGroups.map((classGroup) => [
		<div
			className="text-nowrap"
		>
			{classGroup.classGroupName}
		</div>,
		<div>
			<GameClassByClassGroupDisplay
				classGroupId={classGroup.classGroupId ?? ""}
			/>
		</div>,
		<div
			className="flex flex-row items-center justify-center gap-2 pl-16"
		>
			<div
				className="py-4 border-l border-neutral-500"
			>
				&nbsp;
			</div>
			<ClassGroupButtons
				buttonProps={buttonProps}
				showClassGroupModal={() => {
					setSelectedClassGroup(classGroup);
					setDisplayClassGroupModal(true);
				}}
				showDeleteClassGroupModal={() => {
					setSelectedClassGroup(classGroup);
					setDisplayDeleteClassGroupModal(true);
				}}
			/>
		</div>
	]);


	return (
		<>
			<Table
				tableHeadElements={headElements}
				tableBodyElements={bodyElements}
			/>
			<ClassGroupModal
				display={displayClassGroupModal}
				close={() => { setDisplayClassGroupModal(false); setSelectedClassGroup(undefined); }}
				classGroup={selectedClassGroup}
				raidGroup={raidGroup}
				selectedGameClasses={gameClassesQuery.data ?? []}
			/>
			<DeleteClassGroupModal
				display={displayDeleteClassGroupModal}
				close={() => { setDisplayDeleteClassGroupModal(false); setSelectedClassGroup(undefined); }}
				raidGroupId={selectedClassGroup?.raidGroupId ?? ""}
				classGroup={selectedClassGroup}
			/>
		</>
	);
}