<script lang="ts">
	import Label from './Label.svelte';
	import StyledRawInput from './StyledRawInput.svelte';
	import { type ValidatorOptions } from '@svelte-toolkit/validate';
	import { generateIdentifier } from './util.js';
	import type { ClassValue } from 'svelte/elements';

	interface Props {
		id?: string;
		name?: string;
		label?: string;
		value?: string;
		placeholder?: string;
		type?: HTMLInputElement['type'];
		validate?: ValidatorOptions;
		invalidMessage?: string;
		ref?: HTMLInputElement | null;
		class?: ClassValue | null | undefined;
	}

	let {
		id = generateIdentifier('text-input'),
		name,
		label,
		value = $bindable(''),
		placeholder,
		type,
		validate: validateOpts,
		invalidMessage = 'Field is required',
		ref = $bindable<HTMLInputElement | null>(null),
		class: classValue
	}: Props = $props();

	let valid: boolean = $state(true);
</script>

<div class={classValue}>
	{#if label}
		<Label for={id}>{label}</Label>
	{/if}

	<StyledRawInput
		{placeholder}
		{id}
		{name}
		{type}
		bind:value
		bind:ref
		validate={validateOpts}
		onvalidate={(e) => {
			valid = e.detail.valid;
		}}
	/>

	{#if validateOpts}
		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
			<Label for={id} error>
				{invalidMessage}
			</Label>
		</div>
	{/if}
</div>
