<script lang="ts">
	import { page } from '$app/stores';
	import { SortDirection } from '$gql/graphql';

	import { getSortContext } from '$lib/Sort';
	import { slideXFast } from '$lib/Transitions';
	import { getRandomInt } from '$lib/Utils';
	import { slide } from 'svelte/transition';

	const sort = getSortContext();

	function toggle() {
		if ($sort.direction === SortDirection.Ascending) {
			$sort.direction = SortDirection.Descending;
		} else {
			$sort.direction = SortDirection.Ascending;
		}

		apply();
	}

	function apply() {
		if ($sort.on === 'RANDOM' && $sort.seed === undefined) {
			$sort.seed = getRandomInt(0, 1000000000);
		}
		$sort.apply($page.url.searchParams);
	}

	function reshuffle() {
		$sort.seed = undefined;
		apply();
	}
</script>

<div class="rounded-group flex flex-row">
	<select class="btn-slate" bind:value={$sort.on} on:change={apply} title="Sort on...">
		{#each Object.entries($sort.labels) as [value, label]}
			<option {value}>{label}</option>
		{/each}
	</select>
	<button type="button" class="btn-slate" title="Toggle sort direction" on:click={toggle}>
		{#if $sort.direction === SortDirection.Ascending}
			<span class="icon-base icon-[material-symbols--sort] -scale-y-100" />
		{:else}
			<span class="icon-base icon-[material-symbols--sort]" />
		{/if}
	</button>
	{#if $sort.on === 'RANDOM'}
		<button
			type="button"
			class="btn-slate"
			title="Reshuffle"
			on:click={reshuffle}
			transition:slide={slideXFast}
		>
			<div class="flex">
				<span class="icon-base icon-[material-symbols--shuffle]" />
			</div>
		</button>
	{/if}
</div>