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

let {
	tags = $bindable<string[]>([]),
	initialTitle = '',
	initialDocumentLocation = '',
	initialSummary = '',
	titleRequired = false,
	suggestedTitle = '',
	hideTitle = false
}: {
	tags?: string[];
	initialTitle?: string;
	initialDocumentLocation?: string;
	initialSummary?: string;
	titleRequired?: boolean;
	suggestedTitle?: string;
	hideTitle?: boolean;
} = $props();

let titleDirty = $state(false);
let titleOverride = $state(untrack(() => initialTitle));
let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOverride);
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.doc_section_description()}
	</h2>

	<div class="space-y-5">
		{#if !hideTitle}
			<!-- Titel -->
			<div>
				<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
					>{m.form_label_title()}{#if titleRequired}
						*{/if}</label
				>
				<input
					id="title"
					type="text"
					name="title"
					value={titleValue}
					oninput={(e) => {
						titleOverride = (e.target as HTMLInputElement).value;
						titleDirty = true;
					}}
					required={titleRequired}
					class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
				/>
			</div>
		{/if}

		<!-- Aufbewahrungsort -->
		<div>
			<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
				>{m.form_label_archive_location()}</label
			>
			<input
				id="documentLocation"
				type="text"
				name="documentLocation"
				value={initialDocumentLocation}
				placeholder={m.form_placeholder_archive_location()}
				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
			<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
		</div>

		<!-- Schlagworte -->
		<div>
			<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
			<TagInput bind:tags={tags} />
			<input type="hidden" name="tags" value={tags.join(',')} />
		</div>

		<!-- Inhalt -->
		<div>
			<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
				>{m.form_label_content()}</label
			>
			<textarea
				id="summary"
				name="summary"
				rows="5"
				placeholder={m.form_placeholder_content()}
				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
				>{initialSummary}</textarea
			>
		</div>
	</div>
</div>
