<script lang="ts">
	import { getSelectionContext } from './context';

	const { selected: _selected } = getSelectionContext();

	export let value = '';
	export let selected: boolean = false;
	$: if (selected) {
		$_selected = value;
	}

	function updateSelected() {
		if ($_selected === value) {
			selected = true;
		} else {
			selected = false;
		}
	}

	$: if ($_selected) updateSelected();
</script>

{#if $_selected !== value}
	<div class="wrapper" class:selected={$_selected === value}>
		<input type="checkbox" name="" id="" bind:checked={selected} />
		<button
			on:click={() => {
				$_selected = value;
			}}><slot /></button
		>
	</div>
{/if}

<style>
	.wrapper {
		display: flex;
		color: black;
		background: white;
	}
	.wrapper.selected {
		position: absolute;
		top: 0px;
	}
</style>
