import { ButtonProps } from "@/components/button/Button";
import Table from "@/components/table/Table";
import { GameClass } from "@/interface/GameClass";
import { useAuth } from "@/providers/AuthProvider";
import { isGameAdmin } from "@/util/PermissionUtil";
import { useState } from "react";
import GameClassAdminButtons from "./GameClassAdminButtons";
import DeleteGameClassModal from "./modals/DeleteGameClassModal";
import GameClassModal from "./modals/GameClassModal";


export default function GameClassList({
	gameClasses
}:{
	gameClasses: GameClass[];
}){
	const { gamePermissions, accountPermissions } = useAuth();
	const [ selectedGameClass, setSelectedGameClass ] = useState<GameClass>();
	const [ displayGameClassModal, setDisplayGameClassModal ] = useState(false);
	const [ displayDeleteGameClassModal, setDisplayDeleteGameClassModal ] = useState(false);


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


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

	const bodyElements: React.ReactNode[][] = gameClasses.map((gameClass) => [
		<div>
			{
				gameClass.gameClassIcon &&
				<div
					className="absolute -my-4 max-h-14 max-w-14"
				>
					<img
						className="m-auto"
						src={`${import.meta.env.VITE_ICON_URL}/gameClass/${gameClass.gameClassIcon}`}
					/>
				</div>
			}
			&nbsp;
		</div>,
		<div>
			{gameClass.gameClassName}
		</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>
			<GameClassAdminButtons
				gameClass={gameClass}
				buttonProps={{
					...buttonProps,
					disabled: !isGameAdmin(gameClass.gameId, gamePermissions, accountPermissions)
				}}
				showEditGameClassModal={() => {
					setSelectedGameClass(gameClass);
					setDisplayGameClassModal(true);
				}}
				showDeleteGameClassModal={() => {
					setSelectedGameClass(gameClass);
					setDisplayDeleteGameClassModal(true);
				}}
			/>
		</div>
	]);


	return (
		<>
			<Table
				tableHeadElements={headElements}
				tableBodyElements={bodyElements}
			/>
			<GameClassModal
				display={displayGameClassModal}
				close={() => {setDisplayGameClassModal(false); setSelectedGameClass(undefined);}}
				gameId={selectedGameClass?.gameId ?? ""}
				gameClass={selectedGameClass}
			/>
			<DeleteGameClassModal
				display={displayDeleteGameClassModal}
				close={() => {setDisplayDeleteGameClassModal(false); setSelectedGameClass(undefined);}}
				gameClass={selectedGameClass}
			/>
		</>
	);
}