<article>
	{#if $activeCampaign}
		<h5>{$activeCampaign.name}</h5>
		<h6>Chapter 1</h6>
		<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} />
		<div class="medium-divider" />
		<Battle {...battles[1]} {campaignId} chapter={1} chapterBattle={2} />
		<div class="medium-divider" {campaignId} />
		<h6>Chapter 2</h6>
		<Battle {...battles[2]} {campaignId} chapter={2} chapterBattle={1} />
		<div class="medium-divider" />
		<Battle {...battles[3]} {campaignId} chapter={2} chapterBattle={2} />
		<div class="medium-divider" />
		<h6>Chapter 3</h6>
		<Battle {...battles[4]} {campaignId} chapter={3} chapterBattle={1} />
		<div class="medium-divider" />
		<Battle {...battles[5]} {campaignId} chapter={3} chapterBattle={2} />
		<div class="medium-divider" />
		<h6>Chapter 4</h6>
		<Battle {...battles[6]} {campaignId} chapter={4} chapterBattle={1} />
		<div class="medium-divider" />
		<Battle {...battles[7]} {campaignId} chapter={4} chapterBattle={2} />
		<div class="medium-divider" />
		<Battle {...battles[8]} {campaignId} chapter={4} chapterBattle={3} />
		<div class="medium-divider" />
		<Battle {...battles[9]} {campaignId} chapter={4} chapterBattle={4} />
		<div class="medium-divider" />
		<Battle {...battles[10]} {campaignId} chapter={4} chapterBattle={5} />
		<div class="medium-divider" />
		<Battle {...battles[11]} {campaignId} chapter={4} chapterBattle={6} />
		<div class="medium-divider" />
	{/if}
</article>

<script>
	import * as R from 'remeda';
	import Battle from './Campaign/Battle.svelte';

	import { getContext } from 'svelte';

	export let params;

	const api = getContext('api');

	api.event.setActiveCampaign(params.campaignId);

	const { activeCampaign } = getContext('api');

	$: battles = $activeCampaign?.battles ?? [];

	$: while (battles.length <= 12) battles.push({ notYet: true });

	const campaignId = params.campaignId;

	$: byChapter = R.pipe(
		$activeCampaign?.battles ?? [],
		R.groupBy(({ id }) => R.clamp(1 + parseInt(id / 2), { max: 4 })),
	);

	$: console.log(byChapter);
</script>

<style>
</style>
