import { ButtonProps } from "@/components/button/Button";
import Table from "@/components/table/Table";
import { RaidGroup } from "@/interface/RaidGroup";
import { useState } from "react";
import { Link } from "react-router";
import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
import RaidGroupModal from "./modals/RaidGroupModal";
import RaidGroupAdminButtons from "./RaidGroupAdminButtons";


export default function RaidGroupsList({
	raidGroups
}:{
	raidGroups: RaidGroup[];
}){
	const [ selectedRaidGroup, setSelectedRaidGroup ] = useState<RaidGroup>();
	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = 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[][] = raidGroups.map((raidGroup) => [
		<div>
			{
				raidGroup.raidGroupIcon &&
				<div
					className="absolute -my-4"
				>
					<img
						className="m-auto max-h-14 max-w-14"
						src={`${import.meta.env.VITE_ICON_URL}/raidGroup/${raidGroup.raidGroupIcon}`}
					/>
				</div>
			}
			&nbsp;
		</div>,
		<Link
			to={`/raidGroup/${raidGroup.raidGroupId}`}
		>
			{raidGroup.raidGroupName}
		</Link>,
		<div
			className="flex flex-row items-center justify-center gap-2 pl-16"
		>
			<div
				className="py-4 border-l border-neutral-500"
			>
				&nbsp;
			</div>
			<RaidGroupAdminButtons
				buttonProps={buttonProps}
				showEditRaidGroupModal={() => {
					setSelectedRaidGroup(raidGroup);
					setDisplayEditRaidGroupModal(true);
				}}
				showDeleteRaidGroupModal={() => {
					setSelectedRaidGroup(raidGroup);
					setDisplayDeleteRaidGroupModal(true);
				}}
			/>
		</div>
	]);


	return (
		<>
			<Table
				tableHeadElements={headElements}
				tableBodyElements={bodyElements}
			/>
			<RaidGroupModal
				display={displayEditRaidGroupModal}
				close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
				raidGroup={selectedRaidGroup}
			/>
			<DeleteRaidGroupModal
				display={displayDeleteRaidGroupModal}
				close={() => {setDisplayDeleteRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
				raidGroup={selectedRaidGroup}
			/>
		</>
	);
}