<script lang="ts">
import * as m from '$lib/paraglide/messages.js';

interface Props {
	sort: string;
	dir: string;
}

let { sort = $bindable(), dir = $bindable() }: Props = $props();

function toggleDir() {
	dir = dir === 'asc' ? 'desc' : 'asc';
}
</script>

<div class="inline-flex items-stretch">
	<label for="sort-field" class="sr-only">{m.docs_sort_label()}</label>
	<div class="relative">
		<select
			id="sort-field"
			bind:value={sort}
			class="appearance-none border border-line bg-muted py-2.5 pr-9 pl-4 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		>
			<option value="DATE">{m.docs_sort_date()}</option>
			<option value="TITLE">{m.docs_sort_title()}</option>
			<option value="SENDER">{m.docs_sort_sender()}</option>
			<option value="RECEIVER">{m.docs_sort_receiver()}</option>
			<option value="UPLOAD_DATE">{m.docs_sort_upload()}</option>
		</select>
		<svg
			class="pointer-events-none absolute top-1/2 right-2.5 h-4 w-4 -translate-y-1/2 text-ink-2"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 20 20"
			fill="currentColor"
			aria-hidden="true"
		>
			<path
				fill-rule="evenodd"
				d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
				clip-rule="evenodd"
			/>
		</svg>
	</div>
	<button
		type="button"
		onclick={toggleDir}
		class="-ml-px flex items-center justify-center border border-line bg-muted px-3 py-2.5 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		aria-label={dir === 'asc' ? m.sort_dir_asc() : m.sort_dir_desc()}
	>
		{#if dir === 'asc'}
			<img
				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Up-MD.svg"
				alt=""
				aria-hidden="true"
				class="h-5 w-5 opacity-60"
			/>
		{:else}
			<img
				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Down-MD.svg"
				alt=""
				aria-hidden="true"
				class="h-5 w-5 opacity-60"
			/>
		{/if}
	</button>
</div>
