import { ButtonProps } from "@/components/button/Button";
import PersonCharacterDisplay from "@/components/personCharacter/PersonCharacterDisplay";
import Table from "@/components/table/Table";
import { Person } from "@/interface/Person";
import { RaidGroup } from "@/interface/RaidGroup";
import { useAuth } from "@/providers/AuthProvider";
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
import { useState } from "react";
import { Link } from "react-router";
import PersonCharacterModal from "../personCharacter/modal/PersonCharacterModal";
import DeletePersonModal from "./modals/DeletePersonModal";
import PersonModal from "./modals/PersonModal";
import PersonAdminButtons from "./PersonAdminButtons";


export default function PersonList({
	people,
	raidGroup
}:{
	people: Person[];
	raidGroup: RaidGroup;
}){
	const { accountPermissions, raidGroupPermissions } = useAuth();
	const [ selectedPerson, setSelectedPerson ] = useState<Person>();
	const [ displayUpdatePersonModal, setDisplayUpdatePersonModal ] = useState(false);
	const [ displayDeletePersonModal, setDisplayDeletePersonModal ] = useState(false);
	const [ displayCreatePersonCharacterModal, setDisplayCreatePersonCharacterModal ] = 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"
		>
			Person Name
		</div>,
		<div
			className="text-nowrap"
		>
			Discord ID
		</div>,
		<div>
			Characters
		</div>,
		<div
			className="pl-16"
		>
			Actions
		</div>
	];

	const bodyElements: React.ReactNode[][] = people.map((person) => [
		<Link
			to={`/raidGroup/${raidGroup.raidGroupId}/person/${person.personId}`}
			className="text-nowrap"
		>
			{person.personName}
		</Link>,
		<div>
			{person.discordId}
		</div>,
		<Link
			to={`/raidGroup/${raidGroup.raidGroupId}/person/${person.personId}`}
			className="text-nowrap"
		>
			<PersonCharacterDisplay
				personId={person.personId ?? ""}
				raidGroupId={raidGroup.raidGroupId ?? ""}
			/>
		</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>
			<PersonAdminButtons
				person={person}
				buttonProps={buttonProps}
				showUpdatePersonModal={() => {
					setSelectedPerson(person);
					setDisplayUpdatePersonModal(true);
				}}
				showDeletePersonModal={() => {
					setSelectedPerson(person);
					setDisplayDeletePersonModal(true);
				}}
				showCreatePersonCharacterModal={() => {
					setSelectedPerson(person);
					setDisplayCreatePersonCharacterModal(true);
				}}
			/>
		</div>
	]);


	return (
		<>
			<Table
				tableHeadElements={headElements}
				tableBodyElements={bodyElements}
			/>
			<PersonModal
				display={displayUpdatePersonModal}
				close={() => {setDisplayUpdatePersonModal(false); setSelectedPerson(undefined);}}
				person={selectedPerson}
				raidGroupId={raidGroup.raidGroupId ?? ""}
			/>
			<DeletePersonModal
				display={displayDeletePersonModal}
				close={() => {setDisplayDeletePersonModal(false); setSelectedPerson(undefined);}}
				person={selectedPerson}
				raidGroupId={raidGroup.raidGroupId ?? ""}
			/>
			<PersonCharacterModal
				display={displayCreatePersonCharacterModal}
				close={() => {setDisplayCreatePersonCharacterModal(false); setSelectedPerson(undefined);}}
				personId={selectedPerson?.personId ?? ""}
				personCharacter={undefined}
				gameId={raidGroup.gameId}
				raidGroupId={raidGroup.raidGroupId ?? ""}
			/>
		</>
	);
}