<script lang="ts">
	import type { SubspeciesField } from '$lib/types';
	import { species } from '$lib/data';
	import { slugify } from '$lib/utils/slugify';

	let { field, value = '', onChange, data }: {
		field: SubspeciesField;
		value: string;
		onChange: (v: string) => void;
		data: Record<string, unknown>;
	} = $props();

	let currentSpecies = $derived(species.find((s) => s.id === data[slugify('Species')]));
	let subs = $derived(currentSpecies?.subspecies ?? []);
	let label = $derived(currentSpecies?.subspeciesLabel ?? field.label);
	let selected = $derived(subs.find((s) => s.id === value));
</script>

{#if subs.length > 0}
	<div class="block">
		<label class="block">
			<span class="text-sm font-medium">{label}</span>
			<select
				{value}
				onchange={(e) => onChange((e.target as HTMLSelectElement).value)}
				class="mt-1 block w-full rounded px-3 py-2 text-sm"
				style="background: var(--bg-input); border: 1px solid var(--border); color: var(--text);"
			>
				<option value="">—</option>
				{#each subs as sub}
					<option value={sub.id}>{sub.name}</option>
				{/each}
			</select>
		</label>
		{#if selected?.description}
			<p class="mt-1 text-sm italic" style="color: var(--text-muted);">{selected.description}</p>
		{/if}
	</div>
{/if}
