<script lang="ts">
	import { getSelectionContext } from '$lib/Selection';
	import { accelerator } from '$lib/Shortcuts';
	import { fadeDefault, slideXFast } from '$lib/Transitions';
	import Badge from '$lib/components/Badge.svelte';
	import { onDestroy } from 'svelte';
	import { fade, slide } from 'svelte/transition';

	const selection = getSelectionContext();

	export let page = false;

	const toggle = () => ($selection = $selection.toggle());
	const all = () => ($selection = $selection.all());
	const none = () => ($selection = $selection.none());

	onDestroy(() => ($selection = $selection.clear()));
</script>

<div class="rounded-group flex">
	<button
		type="button"
		class="btn-slate relative"
		class:toggled={$selection.active}
		title={`${$selection.active ? 'Exit' : 'Enter'} ${page ? 'page ' : ' '}selection mode`}
		on:click={toggle}
		use:accelerator={'s'}
	>
		{#if $selection.active}
			{#if page}
				<span class="icon-base icon-[material-symbols--edit-document]" />
			{:else}
				<span class="icon-base icon-[material-symbols--remove-selection]" />
			{/if}
		{:else if page}
			<span class="icon-base icon-[material-symbols--edit-document-outline]" />
		{:else}
			<span class="icon-base icon-[material-symbols--select]" />
		{/if}
		<Badge number={$selection.size} />
	</button>
	{#if $selection.active}
		<div class="rounded-group-end flex" transition:slide={slideXFast}>
			<button type="button" class="btn-slate" title="Select all" on:click={all}>
				<span class="icon-base icon-[material-symbols--select-all]" />
			</button>
			<button type="button" class="btn-slate" title="Select none" on:click={none}>
				<span class="icon-base icon-[material-symbols--deselect]" />
			</button>
		</div>
	{/if}
</div>
{#if $selection.size > 0}
	<div class="rounded-group flex" transition:fade={fadeDefault}>
		<slot />
	</div>
{/if}