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

type Props = {
	documentId: string;
	canWrite: boolean;
	isPdf: boolean;
	hasTranscription: boolean;
	transcribeMode: boolean;
	filePath?: string | null;
	originalFilename?: string | null;
	fileUrl: string;
};

let {
	documentId,
	canWrite,
	isPdf,
	hasTranscription,
	transcribeMode = $bindable(),
	filePath = null,
	originalFilename = null,
	fileUrl
}: Props = $props();

const canOpenTranscription = $derived((canWrite || hasTranscription) && isPdf);
const transcriptionLabel = $derived(
	canWrite ? m.transcription_mode_label() : m.transcription_read_label()
);
</script>

{#if canOpenTranscription && !transcribeMode}
	<button
		onclick={() => (transcribeMode = true)}
		aria-label={transcriptionLabel}
		aria-pressed={false}
		class="hidden items-center gap-1.5 rounded border border-primary px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary md:flex"
	>
		<svg
			class="h-5 w-5 shrink-0"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="1.5"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
			/>
		</svg>
		{transcriptionLabel}
	</button>
{/if}

{#if transcribeMode}
	<button
		onclick={() => (transcribeMode = false)}
		aria-label={m.transcription_mode_stop()}
		aria-pressed={true}
		class="flex items-center gap-1.5 rounded bg-primary px-3 py-1.5 font-sans text-[16px] font-medium text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary"
	>
		<svg
			class="h-5 w-5 shrink-0"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="1.5"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
			/>
		</svg>
		{m.transcription_mode_stop()}
	</button>
{/if}

{#if canWrite && !transcribeMode}
	<a
		href="/documents/{documentId}/edit"
		aria-label={m.btn_edit()}
		class="flex items-center gap-1.5 rounded border border-primary bg-transparent px-3 py-1.5 text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary"
	>
		<img
			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
			alt=""
			aria-hidden="true"
			class="h-5 w-5"
		/>
		<span class="hidden sm:inline">{m.btn_edit()}</span>
	</a>
{/if}

{#if filePath && !transcribeMode}
	<a
		href={fileUrl}
		download={originalFilename}
		class="hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block"
		title={m.doc_download_title()}
	>
		<img
			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
			alt=""
			aria-hidden="true"
			class="h-5 w-5 shrink-0"
		/>
	</a>
{/if}
