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

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

let {
	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()
);

let mobileMenuOpen = $state(false);

function startTranscribe() {
	transcribeMode = true;
	mobileMenuOpen = false;
}
</script>

<div role="group" class="relative" use:clickOutside onclickoutside={() => (mobileMenuOpen = false)}>
	<button
		type="button"
		onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
		aria-label={m.topbar_more_actions()}
		aria-haspopup="true"
		aria-expanded={mobileMenuOpen}
		class="flex h-9 w-9 items-center justify-center rounded border border-line bg-muted transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary"
	>
		<img
			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/View-More-MD.svg"
			alt=""
			aria-hidden="true"
			class="h-5 w-5"
		/>
	</button>

	{#if mobileMenuOpen}
		<div
			role="menu"
			class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg"
		>
			{#if canOpenTranscription && !transcribeMode}
				<button
					onclick={startTranscribe}
					aria-label={transcriptionLabel}
					aria-pressed={false}
					class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted 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>
					{transcriptionLabel}
				</button>
			{/if}

			{#if filePath}
				<a
					href={fileUrl}
					download={originalFilename}
					onclick={() => (mobileMenuOpen = false)}
					class="flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
					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"
					/>
					{m.doc_download_title()}
				</a>
			{/if}
		</div>
	{/if}
</div>
