import PrimaryButton from "@/components/button/PrimaryButton";
import { RaidInstance } from "@/interface/RaidInstance";
import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
import RaidInstanceCreatorTableBody from "./RaidInstanceCreatorTableBody";
import RaidInstanceCreatorTableHeader from "./RaidInstanceCreatorTableHeader";


export default function RaidInstanceCreatorTable({
	onClickHeaderCell,
	onClickBodyCell
}:{
	onClickHeaderCell: (col: number) => void;
	onClickBodyCell: (row: number, col: number) => void;
}){
	const { raidInstance, setRaidInstance } = useRaidInstanceContext();


	const addRun = () => {
		const newRaidInstance = {...raidInstance};
		newRaidInstance.numberRuns = (newRaidInstance.numberRuns ?? 0) + 1;
		setRaidInstance(newRaidInstance as RaidInstance);
	}


	return(
		<div
			className="flex flex-col items-center justify-center"
		>
			<div
				className="flex flex-col items-start justify-start max-w-full overflow-auto pb-16"
			>
				<table>
					{/* Header */}
					<RaidInstanceCreatorTableHeader
						onClickHeaderCell={onClickHeaderCell}
					/>
					{/* Body */}
					<RaidInstanceCreatorTableBody
						onClickBodyCell={onClickBodyCell}
					/>
				</table>
			</div>
			{/* Buttons */}
			<PrimaryButton
				id="instanceAddRunButton"
				onClick={addRun}
			>
				Add Run
			</PrimaryButton>
		</div>
	);
}