<script lang="ts">
import { untrack } from 'svelte';
import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
import { m } from '$lib/paraglide/messages.js';

let {
	firstName = '',
	lastName = '',
	birthDate = '',
	email = '',
	contact = ''
}: {
	firstName?: string;
	lastName?: string;
	birthDate?: string;
	email?: string;
	contact?: string;
} = $props();

let birthDateDisplay = $state(untrack(() => isoToGerman(birthDate)));
let birthDateIso = $state(untrack(() => birthDate));

function handleBirthDateInput(e: Event) {
	const result = handleGermanDateInput(e);
	birthDateDisplay = result.display;
	birthDateIso = result.iso;
}
</script>

<div class="space-y-4">
	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
		<label class="block">
			<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.profile_label_first_name()}
			</span>
			<input
				type="text"
				name="firstName"
				value={firstName}
				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</label>

		<label class="block">
			<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.profile_label_last_name()}
			</span>
			<input
				type="text"
				name="lastName"
				value={lastName}
				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</label>
	</div>

	<label class="block">
		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.profile_label_birth_date()}
		</span>
		<input
			type="text"
			placeholder="TT.MM.JJJJ"
			value={birthDateDisplay}
			oninput={handleBirthDateInput}
			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
		<input type="hidden" name="birthDate" value={birthDateIso} />
	</label>

	<label class="block">
		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.profile_label_email()}
		</span>
		<input
			type="email"
			name="email"
			value={email}
			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</label>

	<label class="block">
		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.profile_label_contact()}
		</span>
		<textarea
			name="contact"
			rows="3"
			placeholder={m.profile_contact_placeholder()}
			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			>{contact}</textarea
		>
	</label>
</div>
