<script lang="ts">
	import Label from './Label.svelte';
	import StyledRawInput from './StyledRawInput.svelte';
	import { generateIdentifier } from './util';
	import type { ClassValue } from 'svelte/elements';
	import type { ComponentProps } from 'svelte';

	interface Props extends ComponentProps<typeof StyledRawInput> {
		id?: string;
		label?: string;
		value?: string;
		invalidMessage?: string | null;
		ref?: HTMLInputElement | null;
		class?: ClassValue | null | undefined;
	}

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

	let valid: boolean = $state(true);

	export const focus = () => {
		if (ref) ref.focus();
	};
</script>

<div class={['w-full', classValue]}>
	{#if label}
		<Label for={id}>{label}</Label>
	{/if}

	<StyledRawInput
		{id}
		bind:value
		bind:ref
		onvalidate={(e) => {
			valid = e.detail.valid;
		}}
		{...others}
	/>

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