import { ButtonProps } from "@/components/button/Button";
import Table from "@/components/table/Table";
import { Game } from "@/interface/Game";
import { useState } from "react";
import GameAdminButtons from "./GameAdminButtons";
import DeleteGameModal from "./modals/DeleteGameModal";
import GameModal from "./modals/GameModal";


export default function GamesList({
	games
}:{
	games: Game[];
}){
	const [ selectedGame, setSelectedGame ] = useState<Game>();
	const [ displayEditGameModal, setDisplayEditGameModal ] = useState(false);
	const [ displayDeleteGameModal, setDisplayDeleteGameModal ] = 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[][] = games.map((game) => [
		<div>
			{
				game.gameIcon &&
				<div
					className="absolute -my-4"
				>
					<img
						className="m-auto"
						src={`${import.meta.env.VITE_ICON_URL}/gameIcons/${game.gameIcon}`}
						height={56}
						width={56}
					/>
				</div>
			}
			&nbsp;
		</div>,
		<div>
			{game.gameName}
		</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>
			<GameAdminButtons
				buttonProps={buttonProps}
				showEditGameModal={() => {
					setSelectedGame(game);
					setDisplayEditGameModal(true);
				}}
				showDeleteGameModal={() => {
					setSelectedGame(game);
					setDisplayDeleteGameModal(true);
				}}
			/>
		</div>
	]);


	return (
		<>
			<Table
				tableHeadElements={headElements}
				tableBodyElements={bodyElements}
			/>
			<GameModal
				display={displayEditGameModal}
				close={() => {setDisplayEditGameModal(false); setSelectedGame(undefined);}}
				game={selectedGame}
			/>
			<DeleteGameModal
				display={displayDeleteGameModal}
				close={() => {setDisplayDeleteGameModal(false); setSelectedGame(undefined);}}
				game={selectedGame}
			/>
		</>
	);
}