import DangerButton from "@/components/button/DangerButton";
import TertiaryButton from "@/components/button/TertiaryButton";
import { PersonCharacter } from "@/interface/PersonCharacter";
import { RaidInstance } from "@/interface/RaidInstance";
import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
import { getPersonCharactersFromXrefs } from "@/util/PersonCharacterUtil";
import moment from "moment";
import { BsDiscord, BsXLg } from "react-icons/bs";


export default function RaidInstanceCreatorTableBody({
	onClickBodyCell
}:{
	onClickBodyCell: (run: number, slot: number) => void;
}){
	const {
		raidInstance, setRaidInstance,
		people,
		personCharacterXrefs, setPersonCharacterXrefs,
		personCharacters,
		selectedClassGroups
	} = useRaidInstanceContext();


	const characterGrid: (PersonCharacter | null)[][] = getPersonCharactersFromXrefs(personCharacterXrefs, personCharacters, raidInstance);


	const removeRun = (runNumber: number) => {
		const newXrefs = personCharacterXrefs.filter((xref) => xref.groupNumber !== runNumber)?.map((xref) => {return {...xref, groupNumber: xref.groupNumber >= runNumber ? xref.groupNumber - 1 : xref.groupNumber}});
		setPersonCharacterXrefs(newXrefs);
		setRaidInstance({...raidInstance, numberRuns: (raidInstance?.numberRuns ?? 1) - 1} as RaidInstance);
	}

	const copyDiscordStringToClipBoard = (run: number) => {
		let discordString = "";
		//Instance name
		discordString += `${raidInstance?.raidInstanceName}\n`;

		//Start time
		discordString += moment(raidInstance?.raidStartDate).format("MM/DD/YYYY HH:mm") + " - ";
		//End time
		discordString += moment(raidInstance?.raidEndDate).format("MM/DD/YYYY HH:mm") + "\n";

		//Characters
		characterGrid[run].forEach((ch, index) => {
			const person = people.find((p) => p.personId === ch?.personId);
			if(person){
				//Discord ID / name
				discordString += (person.discordId && (person.discordId !== "")) ? "@" + person.discordId : person.personName;
				discordString += ": ";
				//Character Name
				discordString += ch?.characterName;
			}
			else{
				const classGroup = selectedClassGroups[index];
				//Class Group
				discordString += classGroup?.classGroupName ?? "Any Class";
				discordString += ": ";
				//Any
				discordString += "None";
			}
			discordString += "\n";
		});

		navigator.clipboard.writeText(discordString);
	}


	return (
		<tbody
			id="instanceTableBody"
		>
			{
				characterGrid.map((run, runIndex) => (
					<tr
						key={runIndex}
					>
						{
							run.map((ch, chIndex) => (
								<td
									key={chIndex}
									className="px-4 py-2 border-2 cursor-default"
									onClick={() => onClickBodyCell(runIndex, chIndex)}
								>
									<div
										className="flex flex-row justify-start flex-nowrap"
									>
										{
											ch?.gameClassId &&
											<img
												className="mr-2 max-h-8 max-w-8"
												src={`${import.meta.env.VITE_ICON_URL}/gameClass/id/${ch.gameClassId}`}
											/>
										}
										{ch ? ch.characterName : "None"}
									</div>
								</td>
							))
						}
						<td
							className="pl-2"
						>
							<div
								className="flex flex-row justify-center items-center cursor-pointer p-2 space-x-2"
							>
								<DangerButton
									id={`removeRun${runIndex}`}
									variant="ghost"
									shape="square"
									onClick={() => removeRun(runIndex)}
								>
									<BsXLg
										size={22}
										strokeWidth={2}
									/>
								</DangerButton>
								<TertiaryButton
									id={`copyDiscordString${runIndex}`}
									variant="ghost"
									shape="square"
									onClick={() => copyDiscordStringToClipBoard(runIndex)}
								>
									<BsDiscord
										size={22}
									/>
								</TertiaryButton>
							</div>
						</td>
					</tr>
				))
			}
		</tbody>
	);
}