<svelte:options accessors={true} />

<script lang="ts">
	import { IconSolid } from 'svelte-heros-v2';

	export let id: string;
	export let name: string | null = null;
	export let type: string;
	export let value: string | null = null;
	export let required = false;
	export let disabled = false;

	export let inputElement: HTMLInputElement | undefined = undefined;

	let initialType = type;
</script>

<!-- the cursor-not-allowed class must be set here because a disabled button does not respect the 'cursor' css property -->
<div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
	{#if type === 'submit'}
		<input class="btn" {id} type="submit" {value} {disabled} bind:this={inputElement} />
	{:else}
		<div>
			{#if $$slots.label}
				<label class="label" for={id}>
					<span class="label-text">
						<slot name="label" />
						{#if required}
							<span class="text-red-700">*</span>
						{/if}
					</span>
				</label>
			{/if}
			<div class="flex items-center">
				<input
					class={type === 'checkbox'
						? 'checkbox'
						: `input input-bordered w-[100%] sm:max-w-[16rem] ${
								initialType === 'password' ? 'pr-11' : ''
						  }`}
					{id}
					{name}
					{type}
					{value}
					{required}
					{disabled}
					autocomplete="off"
					bind:this={inputElement}
				/>
				{#if initialType === 'password'}
					<button
						class="relative right-9"
						type="button"
						on:click={() => {
							type = type === 'password' ? 'text' : 'password';
						}}
					>
						{#if type === 'password'}
							<IconSolid name="eye-slash-solid" />
						{:else}
							<IconSolid name="eye-solid" />
						{/if}
					</button>
				{/if}
			</div>
			{#if $$slots.notice}
				<label class="label" for={id}>
					<span class="label-text-alt"><slot name="notice" /></span>
				</label>
			{/if}
		</div>
	{/if}
</div>
