import { ButtonProps } from "@/components/button/Button";
import Table from "@/components/table/Table";
import { RaidGroup } from "@/interface/RaidGroup";
import { RaidInstance } from "@/interface/RaidInstance";
import { useAuth } from "@/providers/AuthProvider";
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
import moment from "moment";
import { useState } from "react";
import { Link } from "react-router";
import DeleteRaidInstanceModal from "./modals/DeleteRaidInstanceModal";
import RaidInstanceModal from "./modals/RaidInstanceModal";
import RaidInstanceAdminButtons from "./RaidInstanceAdminButtons";


export default function RaidInstanceList({
	raidInstances,
	raidGroup
}:{
	raidInstances: RaidInstance[];
	raidGroup: RaidGroup;
}){
	const { accountPermissions, raidGroupPermissions } = useAuth();
	const [ selectedRaidInstance, setSelectedRaidInstance ] = useState<RaidInstance>();
	const [ displayEditRaidInstanceModal, setDisplayEditRaidInstanceModal ] = useState(false);
	const [ displayDeleteRaidInstanceModal, setDisplayDeleteRaidInstanceModal ] = useState(false);


	const buttonProps: ButtonProps = {
		variant: "ghost",
		size: "md",
		shape: "square",
		disabled: !isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) || !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)
	};


	const headElements: React.ReactNode[] = [
		<div
			className="text-nowrap"
		>
			Raid Instance
		</div>,
		<div
			className="text-nowrap"
		>
			Start Date
		</div>,
		<div
			className="text-nowrap"
		>
			End Date
		</div>,
		<div
			className="text-nowrap"
		>
			Size
		</div>,
		<div
			className="text-nowrap"
		>
			Runs
		</div>,
		<div
			className="text-nowrap pl-16"
		>
			Actions
		</div>
	];

	const bodyElements: React.ReactNode[][] = raidInstances.map((raidInstance) => [
		<Link
			to={`/raidGroup/${raidInstance.raidGroupId}/raidInstance/${raidInstance.raidInstanceId}`}
			className="text-nowrap"
		>
			{raidInstance.raidInstanceName}
		</Link>,
		<div
			className="text-nowrap"
		>
			{moment(raidInstance.raidStartDate).format("MM-DD-YYYY HH:mm")}
		</div>,
		<div
			className="text-nowrap"
		>
			{moment(raidInstance.raidEndDate).format("MM-DD-YYYY HH:mm")}
		</div>,
		<div>
			{raidInstance.raidSize}
		</div>,
		<div>
			{raidInstance.numberRuns}
		</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>
			<RaidInstanceAdminButtons
				raidInstance={raidInstance}
				buttonProps={buttonProps}
				showRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayEditRaidInstanceModal(true); }}
				showDeleteRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayDeleteRaidInstanceModal(true); }}
			/>
		</div>
	]);


	return (
		<>
			<Table
				tableHeadElements={headElements}
				tableBodyElements={bodyElements}
			/>
			<RaidInstanceModal
				display={displayEditRaidInstanceModal}
				close={() => { setDisplayEditRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
				raidInstance={selectedRaidInstance}
				raidGroup={raidGroup}
			/>
			<DeleteRaidInstanceModal
				display={displayDeleteRaidInstanceModal}
				close={() => { setDisplayDeleteRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
				raidInstance={selectedRaidInstance}
			/>
		</>
	);
}