<script lang="ts">
	import RangeSlider from '../vendor/svelte-range-slider/range-slider.svelte';
	let {
		frame = $bindable(),
		frameCount,
		playing = $bindable(),
		playbackStarted = $bindable()
	}: {
		frame: number;
		frameCount: number;
		playing: boolean;
		playbackStarted: number;
	} = $props();
</script>

<div class="w-full flex items-center justify-center pt-2">
	<div class="p-2 pr-1">
		<button
			onclick={(e) => {
				e.stopPropagation();
				playing = !playing;
			}}
			onkeydown={(e) => {
				e.stopPropagation();
				e.preventDefault();
				if (e.key === 'Enter' || e.key === ' ') playing = !playing;
			}}
			aria-label={playing ? 'pause' : 'play'}
			class="flex items-center justify-center"
			><svg
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke-width="1.5"
				stroke="currentColor"
				class="size-6"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d={!playing
						? 'M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z'
						: 'M15.75 5.25v13.5m-7.5-13.5v13.5'}
				/>
			</svg></button
		>
	</div>
	<div class="flex-1">
		<RangeSlider bind:value={frame} min={0} max={frameCount} />
	</div>
	<div class="label p-2 pl-1">
		<input
			type="number"
			bind:value={frame}
			class="w-16 appearance-none text-right"
			style="-moz-appearance:textfield;"
			max={frameCount}
			onkeypress={(e) => {
				e.stopPropagation();
			}}
			onkeydown={(e) => {
				e.stopPropagation();
			}}
		/>
		of {frameCount}
		<!-- <input
			type="number"
			bind:value={frameCount}
			class="w-8 appearance-none"
			style="-moz-appearance:textfield;"
		/> -->
	</div>
</div>
