<script>
  import { boundElements } from 'svelte-preprocess-delegate-events/runtime';
  import { registerDelegatedEvents } from 'svelte-preprocess-delegate-events/runtime';
  import { get_current_component } from 'svelte/internal';"use strict";
import Icon from "./Icon.svelte";
export let variant = "primary";
export let label = "";
export let caption = "";
export let subheading = "";
export let helperText = "";
export let errorText = "";
export let leadingIcon = void 0;
export let trailingIcon = void 0;
export let value = "";
export let type = "text";
export let id = "";
export let placeholder = "";
export let disabled = false;
export let readonly = false;
export let maxlength = void 0;

  const input0 = boundElements();
  const component0 = get_current_component();
  $: registerDelegatedEvents(input0.bounds, component0, (handler) => handler, {});
</script>

<div class:opacity-30={disabled}>
	<div class="flex items-center gap-2">
		<label
			for={id}
			class="text-stone-950"
			class:text-4xl={variant === 'primary'}
			class:font-[500]={variant === 'primary'}
			class:text-xl={variant === 'secondary'}
			class:font-regular={variant === 'secondary'}>{label}</label
		>
		{#if caption}
			<span class="text-xl text-stone-400">{caption}</span>
		{/if}
	</div>

	{#if subheading}
		<span class="text-xl text-stone-400 mt-[6px]">{subheading}</span>
	{/if}

	<div class="relative flex" class:mt-2={label || caption || subheading}>
		{#if leadingIcon}
			<button
				class="absolute inset-y-0 left-0 pl-4 flex items-center"
				class:cursor-default={!leadingIcon.onClick}
				on:click|stopPropagation={() => {
					if (leadingIcon?.onClick) {
						leadingIcon.onClick();
					}
				}}><Icon iconName={leadingIcon.iconName} size="sm" /></button
			>
		{/if}

		<input
			bind:this={input0.bounds}
			{id}
			{...maxlength !== undefined ? { maxlength: maxlength } : {}}
			{...{ type }}
			{disabled}
			bind:value
			{readonly}
			class={[
				'w-full',
				'py-2.5',
				'rounded-lg',
				'focus:ring-sky-400',
				'focus:border-stone-300',
				'focus:ring-2',
				'placeholder:text-stone-400',
				'placeholder:font-regular',
				'placeholder:text-2xl'
			].join(' ')}
			class:border={!readonly}
			class:border-transparent={readonly}
			class:hover:border-stone-400={!disabled && !errorText && !readonly}
			class:pl-4={!leadingIcon}
			class:pl-11={leadingIcon}
			class:pr-2.5={!trailingIcon}
			class:pr-10={trailingIcon}
			class:border-rose-500={errorText}
			class:bg-base-100={readonly}
			class:border-stone-300={!errorText}
			{placeholder}
			{...$$restProps}
		/>

		{#if trailingIcon}
			<button
				class="absolute inset-y-0 right-0 pr-3 flex items-center"
				class:cursor-default={!trailingIcon.onClick}
				on:click|stopPropagation={() => {
					if (trailingIcon?.onClick) {
						trailingIcon.onClick();
					}
				}}><Icon iconName={trailingIcon.iconName} size="sm" /></button
			>
		{/if}
	</div>

	{#if maxlength !== undefined || helperText || errorText}
		<div class="mt-2 flex justify-between flex-wrap gap-2 text-sm text-stone-400 font-medium">
			<!-- Left side: error and helper text -->
			<div class="flex flex-col items-center gap-[6px] text-xl">
				{#if helperText}
					<span class="text-xl text-stone-400">{helperText}</span>
				{/if}
				{#if errorText}
					<div class="flex items-center gap-[6px]">
						<Icon iconName="alert-outline" size="sm" color="rose" />
						<span class="text-xl text-rose-600">{errorText}</span>
					</div>
				{/if}
			</div>

			<!-- Right side: max length indicator -->
			{#if maxlength !== undefined}
				<div class="spruce-input-max-size-indicator pointer-events-none whitespace-nowrap">
					{value.length} / {maxlength}
				</div>
			{/if}
		</div>
	{/if}
</div>
