<h5><a href={`#/campaign/${params.campaignId}`}>{$activeCampaign?.name}</a></h5>
<h6>Chapter {chapter}, battle {chapterBattle} -- {status}</h6>
<dl>
	{#if status === 'ongoing'}
		<dt>wave</dt>
		<dd>{wave === 2 ? 'second' : 'first'}</dd>
	{/if}
	<dt>city</dt>
	<dd>{city}</dd>
	<dt>scenario</dt>
	<dd>{scenario}</dd>
	<dt>character</dt>
	<dd>{character}</dd>

	<dt>difficulty</dt>
	<dd>
		<div class="field border">
			<input
				type="number"
				step="0.5"
				value={difficulty}
				on:change={({ target: { value } }) =>
					event.setBattleDifficulty(params.battleId, value)}
			/>
		</div>

		<!--
			<Stars
				on:change={(e) => (difficulty = e.target.value)}
				config={{
					readOnly: false, //status !== 'preparation',
					countStars: 5,
					score: difficulty,
					showScore: false,
					starConfig: {
						size: 15,
						fillColor: '#F9ED4F',
						strokeColor: '#BB8511',
						unfilledColor: '#FFF',
						strokeUnfilledColor: '#000',
					},
					range: { min: 0, max: 5, step: 0.5 },
				}}
			/>
			{difficulty}
            -->
	</dd>
</dl>

{#if status === 'upcoming'}
	<button>Start battle</button>
{:else if status === 'ongoing'}
	<button on:click={battleVerdict('won')}>Battle won</button>
	<button on:click={battleVerdict('lost')}>Battle lost</button>
{/if}

<script>
	import { getContext } from 'svelte';
	import Stars from '@ernane/svelte-star-rating';

	export let params;

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

	event.setActiveCampaign(params.campaignId);

	$: battles = $activeCampaign?.battles;
	$: battle = battles && battles[params.battleId - 1];
	$: console.log($activeCampaign);
	$: scenario = battle?.scenario;
	$: status = battle?.status;
	$: wave = battle?.wave;
	$: difficulty = battle?.difficulty ?? 0;
	$: character = battle?.character;
	$: city = battle?.city;

	$: console.log(battle);

	let chapter = 1 + parseInt(params.battleId / 2);
	let chapterBattle = params.battleId % 2;

	const battleVerdict = (verdict) =>
		event.setBattleVerdict(params.battleId, verdict);

	//	$: event.setBattleDifficulty(params.battleId, difficulty);
</script>

<style>
	article {
		width: 500px;
	}
	header {
		display: flex;
		align-items: baseline;
	}
	h5 {
		flex: 1;
	}
	h6 {
		font-style: italic;
		font-size: 1.25rem;
	}
	dl {
		width: 100%;
		display: grid;
		grid-template-columns: 8em auto;
		grid-row-gap: 0.75em;
		font-size: 1.25rem;
	}
	dt {
		text-align: right;
		padding-right: 2em;
	}
	dd {
		display: flex;
	}
	article :global(.stars-container) {
		justify-content: left !important;
		margin-right: 1em;
	}
	input {
		width: 5em;
	}
</style>
