Date picker

<script lang="ts">
	import type { DateValue } from '@archeblack/ui/date';
	import { DatePicker, Field } from '@archeblack/ui';

	let delivery = $state<DateValue | undefined>();
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Fecha de entrega" hint="Escribe día, mes y año, o elige en el calendario.">
		<DatePicker bind:value={delivery} />
	</Field>
</div>

<script lang="ts">
	import { getLocalTimeZone, isWeekend, today, type DateValue } from '@archeblack/ui/date';
	import { DatePicker, Field } from '@archeblack/ui';

	const start = today(getLocalTimeZone());
	const end = start.add({ days: 60 });

	let booking = $state<DateValue | undefined>();
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Día del turno" hint="De hoy a 60 días, de lunes a viernes.">
		<DatePicker
			bind:value={booking}
			min={start}
			max={end}
			isDateUnavailable={(date) => isWeekend(date, 'es')}
		/>
	</Field>
</div>

<script lang="ts">
	import { CalendarDate, type DateValue } from '@archeblack/ui/date';
	import { DatePicker, Field } from '@archeblack/ui';

	let launch = $state<DateValue | undefined>(new CalendarDate(2026, 11, 3));
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Launch date" hint="Month, day and year; the week starts on Sunday.">
		<DatePicker
			bind:value={launch}
			locale="en-US"
			weekStartsOn={0}
			triggerLabel="Choose date"
			previousLabel="Previous month"
			nextLabel="Next month"
			emptyLabel="empty"
		/>
	</Field>
</div>

<script lang="ts">
	import { DatePicker } from '@archeblack/ui';
</script>

<div style:display="grid" style:gap="var(--arche-spacing-6)" style:width="min(100%, 20rem)">
	<DatePicker size="sm" aria-label="Fecha, talla sm" />
	<DatePicker aria-label="Fecha, talla md" />
	<DatePicker size="lg" aria-label="Fecha, talla lg" />
</div>

<script lang="ts">
	import { CalendarDate, type DateValue } from '@archeblack/ui/date';
	import { DatePicker, Field } from '@archeblack/ui';

	let due = $state<DateValue | undefined>();
</script>

<div style:display="grid" style:gap="var(--arche-spacing-6)" style:width="min(100%, 20rem)">
	<Field label="Vencimiento" error="Elige la fecha de vencimiento de la factura.">
		<DatePicker bind:value={due} />
	</Field>
	<Field label="Alta de la cuenta" hint="Se fija al crear la cuenta." disabled>
		<DatePicker value={new CalendarDate(2024, 3, 14)} />
	</Field>
</div>

<script lang="ts">
	import { tick } from 'svelte';
	import { DateFormatter, getLocalTimeZone, today, type DateValue } from '@archeblack/ui/date';
	import { Button, DatePicker, Field, Input } from '@archeblack/ui';

	const zone = getLocalTimeZone();
	const firstDay = today(zone).add({ days: 1 });
	const longDate = new DateFormatter('es', { dateStyle: 'long' });

	let title = $state('');
	let date = $state<DateValue | undefined>();
	let submitted = $state(false);
	let saved = $state(false);

	// Los errores aparecen después del primer envío, no mientras la persona completa el formulario.
	const errors = $derived({
		title: title.trim() ? undefined : 'Escribe un título para la reunión.',
		date: !date
			? 'Elige una fecha.'
			: date.compare(firstDay) < 0
				? 'Elige una fecha a partir de mañana.'
				: undefined
	});
	const errorOf = (field: keyof typeof errors) => (submitted ? errors[field] : undefined);

	async function submit(event: SubmitEvent) {
		event.preventDefault();
		const form = event.currentTarget as HTMLFormElement;
		submitted = true;
		saved = !Object.values(errors).some(Boolean);
		if (!saved) {
			// Espera a que los campos muestren su error y lleva el foco al primero. En el campo de
			// fecha, el primer segmento.
			await tick();
			form.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
		}
	}
</script>

<form
	novalidate
	onsubmit={submit}
	style:display="grid"
	style:gap="var(--arche-spacing-6)"
	style:width="min(100%, 24rem)"
>
	<p style:margin="0" style:color="var(--arche-color-text-muted)">
		Los campos con * son obligatorios.
	</p>
	<Field label="Título" required error={errorOf('title')}>
		<Input bind:value={title} autocomplete="off" />
	</Field>
	<Field label="Fecha de la reunión" hint="A partir de mañana." required error={errorOf('date')}>
		<DatePicker bind:value={date} min={firstDay} name="date" />
	</Field>
	<div style:display="flex" style:align-items="center" style:gap="var(--arche-spacing-4)">
		<Button type="submit" variant="primary">Agendar</Button>
		<span role="status" style:color="var(--arche-color-text-muted)">
			{saved && date ? `Reunión agendada para el ${longDate.format(date.toDate(zone))}.` : ''}
		</span>
	</div>
</form>