<script lang="ts">
	import { accelerator } from '$lib/Shortcuts';
	import { toastFinally } from '$lib/Toasts';

	let { dialog }: { dialog?: HTMLElement } = $props();

	function onclick() {
		if (isFullscreen) {
			document.exitFullscreen().catch(toastFinally);
		} else if (dialog?.requestFullscreen) {
			dialog.requestFullscreen().catch(toastFinally);
		}
	}

	let fullscreenElement: HTMLElement | null = $state(null);
	let isFullscreen = $derived(fullscreenElement !== null);
</script>

<svelte:document bind:fullscreenElement />

<button
	type="button"
	class="btn-transparent"
	title="Toggle fullscreen"
	aria-label="Toggle fullscreen"
	{onclick}
	use:accelerator={'f'}
>
	{#if isFullscreen}
		<span class="icon-lg icon-[material-symbols--fullscreen-exit]"></span>
	{:else}
		<span class="icon-lg icon-[material-symbols--fullscreen]"></span>
	{/if}
</button>