<script lang="ts">
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import PersonTypeSelector from '$lib/person/PersonTypeSelector.svelte';
import {
	PERSON_TYPES as TYPES,
	type PersonType,
	type PersonFormData
} from '$lib/person/person-validation';

let { person }: { person: PersonFormData } = $props();

let selectedType = $state<PersonType>(
	untrack(() =>
		TYPES.includes(person.personType as PersonType) ? (person.personType as PersonType) : 'PERSON'
	)
);

const isPerson = $derived(selectedType === 'PERSON');
const lastNameLabel = $derived(
	selectedType === 'INSTITUTION' || selectedType === 'GROUP'
		? m.form_label_name()
		: m.form_label_last_name()
);

const labelCls = 'mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase';
const inputCls =
	'block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
</script>

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<div class="md:col-span-2">
		<p class={labelCls}>
			{m.form_label_person_type()}
		</p>
		<PersonTypeSelector
			value={selectedType}
			name="personType"
			onchange={(type: PersonType) => (selectedType = type)}
		/>
	</div>

	{#if isPerson}
		<div>
			<label for="title" class={labelCls}>{m.form_label_title()}</label>
			<input
				id="title"
				name="title"
				type="text"
				maxlength="50"
				value={person.title ?? ''}
				class={inputCls}
			/>
		</div>
		<div>
			<label for="firstName" class={labelCls}>{m.form_label_first_name()} *</label>
			<input
				id="firstName"
				name="firstName"
				type="text"
				required
				value={person.firstName ?? ''}
				class={inputCls}
			/>
		</div>
	{/if}

	<div class={!isPerson ? 'md:col-span-2' : ''}>
		<label for="lastName" class={labelCls}>{lastNameLabel} *</label>
		<input
			id="lastName"
			name="lastName"
			type="text"
			required
			value={person.lastName}
			class={inputCls}
		/>
	</div>

	{#if isPerson}
		<div class="md:col-span-2">
			<label for="alias" class={labelCls}>{m.form_label_alias()}</label>
			<input id="alias" name="alias" type="text" value={person.alias ?? ''} class={inputCls} />
		</div>
		<div>
			<label for="birthYear" class={labelCls}>{m.person_label_birth_year()}</label>
			<input
				id="birthYear"
				name="birthYear"
				type="number"
				min="1"
				max="2100"
				placeholder={m.person_placeholder_year()}
				value={person.birthYear ?? ''}
				class={inputCls}
			/>
		</div>
		<div>
			<label for="deathYear" class={labelCls}>{m.person_label_death_year()}</label>
			<input
				id="deathYear"
				name="deathYear"
				type="number"
				min="1"
				max="2100"
				placeholder={m.person_placeholder_year()}
				value={person.deathYear ?? ''}
				class={inputCls}
			/>
		</div>
	{/if}

	<div class="md:col-span-2">
		<label for="notes" class={labelCls}>{m.person_label_notes()}</label>
		<textarea
			id="notes"
			name="notes"
			rows="4"
			placeholder={m.person_placeholder_notes()}
			class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			>{person.notes ?? ''}</textarea
		>
	</div>
</div>
