<script lang="ts">
import { goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';

let { canWrite }: { canWrite: boolean } = $props();

const count = $derived(bulkSelectionStore.size);

function openBulkEdit() {
	goto('/documents/bulk-edit');
}

function clearAll() {
	bulkSelectionStore.clear();
}
</script>

{#if canWrite && count > 0}
	<div
		data-testid="bulk-selection-bar"
		class="fixed right-0 bottom-0 left-0 z-30 flex items-center justify-between border-t border-line bg-surface px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6"
	>
		<span class="font-sans text-sm font-medium text-ink" data-testid="bulk-selection-count">
			{m.bulk_edit_n_selected({ count })}
		</span>
		<div class="flex items-center gap-2">
			<button
				type="button"
				onclick={clearAll}
				class="inline-flex min-h-[44px] items-center px-4 py-2 font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
				data-testid="bulk-clear-all"
			>
				{m.bulk_edit_clear_all()}
			</button>
			<button
				type="button"
				onclick={openBulkEdit}
				class="inline-flex min-h-[44px] items-center bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
				data-testid="bulk-edit-open"
			>
				{m.bulk_edit_button()}
			</button>
		</div>
	</div>
{/if}
