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

interface Props {
	blockCount: number;
	storedScriptType: string;
	onTrigger: (scriptType: string, useExistingAnnotations: boolean) => void;
}

let { blockCount, storedScriptType, onTrigger }: Props = $props();

import { untrack } from 'svelte';
let selectedScriptType: string = $state(
	untrack(() => (storedScriptType && storedScriptType !== 'UNKNOWN' ? storedScriptType : ''))
);

function handleClick() {
	if (!selectedScriptType) return;
	onTrigger(selectedScriptType, true);
}
</script>

<div class="flex flex-col gap-3">
	<ScriptTypeSelect bind:value={selectedScriptType} />
	<button
		type="button"
		disabled={!selectedScriptType || blockCount === 0}
		title={!selectedScriptType ? m.ocr_trigger_btn_disabled() : undefined}
		onclick={handleClick}
		class="min-h-[44px] w-full rounded-sm bg-brand-navy font-sans text-sm font-medium text-white transition-colors hover:bg-brand-navy/90 disabled:cursor-not-allowed disabled:opacity-50"
	>
		{m.ocr_trigger_btn()}
	</button>
	{#if blockCount === 0}
		<p class="text-xs text-ink-3">{m.ocr_trigger_no_annotations()}</p>
	{/if}
</div>
