import { ButtonProps } from "@/components/button/Button";
import { RaidGroup } from "@/interface/RaidGroup";
import { useState } from "react";
import RaidGroupAdminButtons from "../raidGroup/RaidGroupAdminButtons";
import DeleteRaidGroupModal from "../raidGroup/modals/DeleteRaidGroupModal";
import RaidGroupModal from "../raidGroup/modals/RaidGroupModal";


export default function RaidGroupHeader({
	raidGroup
}:{
	raidGroup: RaidGroup;
}){
	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);

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


	return (
		<h1
			className="flex flex-col items-center justify-center"
		>
			<div
				className="flex flex-row items-center justify-center text-4xl"
			>
				{
					raidGroup.raidGroupIcon &&
					<img
						className="m-auto mr-4 max-h-18 max-w-18"
						src={`${import.meta.env.VITE_ICON_URL}/raidGroup/${raidGroup.raidGroupIcon}`}
					/>
				}
				{raidGroup.raidGroupName}
			</div>
			<div>
				<RaidGroupAdminButtons
					buttonProps={buttonProps}
					showEditRaidGroupModal={() => setDisplayEditRaidGroupModal(true)}
					showDeleteRaidGroupModal={() => setDisplayDeleteRaidGroupModal(true)}
				/>
			</div>
			<RaidGroupModal
				display={displayEditRaidGroupModal}
				close={() => setDisplayEditRaidGroupModal(false)}
				raidGroup={raidGroup}
			/>
			<DeleteRaidGroupModal
				display={displayDeleteRaidGroupModal}
				close={() => setDisplayDeleteRaidGroupModal(false)}
				raidGroup={raidGroup}
			/>
		</h1>
	);
}