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

interface Props {
	value?: string;
	errorMessage?: string | null;
	name?: string;
	id?: string;
	placeholder?: string;
	class?: string;
	onchange?: () => void;
}

let {
	value = $bindable(''),
	errorMessage = $bindable<string | null>(null),
	name,
	id,
	placeholder,
	class: className = '',
	onchange
}: Props = $props();

let display = $state(isoToGerman(value ?? ''));

function handleInput(e: Event) {
	const result = handleGermanDateInput(e);
	display = result.display;

	if (result.display === '') {
		value = '';
		errorMessage = null;
		onchange?.();
		return;
	}

	if (result.display.length < 10) {
		value = '';
		errorMessage = m.form_date_error();
		return;
	}

	const iso = germanToIso(result.display);
	if (!iso) {
		value = '';
		errorMessage = m.form_date_error();
		return;
	}

	const [, mo, d] = iso.split('-').map(Number);
	if (mo < 1 || mo > 12 || d < 1 || d > 31) {
		value = '';
		errorMessage = m.form_date_error();
		return;
	}

	value = iso;
	errorMessage = null;
	onchange?.();
}
</script>

<input
	type="text"
	inputmode="numeric"
	maxlength="10"
	id={id}
	value={display}
	placeholder={placeholder ?? m.form_placeholder_date()}
	oninput={handleInput}
	class={className}
/>
{#if name}
	<input type="hidden" name={name} value={value} />
{/if}
