<script lang="ts">
	import { fade } from 'svelte/transition';
	import type { HTMLInputAttributes } from 'svelte/elements';

	import { IconChevronRightFilled } from '@tabler/icons-svelte';

	interface Props extends HTMLInputAttributes {
		value?: string;
		label?: string;
		placeholder?: string;
		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
		error?: string;
		uppercase?: boolean;
		onsubmit?: (val: string) => void | Promise<void>;
		[key: string]: any;
	}

	let {
		value = $bindable(''),
		label,
		placeholder = '',
		type = 'text',
		error = '',
		uppercase = false,
		onsubmit,
		...rest
	}: Props = $props();

	let isFocussed = $state(false);

	const handleSubmit = (e: Event) => {
		e.preventDefault();
		if (onsubmit && value) {
			onsubmit(value);
		}
	};
</script>

<div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
	{#if label}
		<label for="adaptive-input">{label}</label>
	{/if}

	<form onsubmit={handleSubmit} class="input-container">
		<input
			id="adaptive-input"
			class:all-caps={uppercase}
			{type}
			{placeholder}
			bind:value
			onfocus={() => (isFocussed = true)}
			onblur={() => (isFocussed = false)}
			{...rest}
		/>

		{#if onsubmit}
			<button
				type="submit"
				class="submit-icon"
				transition:fade
				disabled={!value}
				aria-label="Submit"
			>
				<IconChevronRightFilled />
			</button>
		{/if}
	</form>

	{#if error}
		<span class="error-message" transition:fade>{error}</span>
	{/if}
</div>

<style>
	.input-wrapper {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		width: 100%;
		font-family: 'URW Gothic', sans-serif;
	}

	.input-container {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		background-color: var(--color-title);
		border-radius: 5000px;
		transition: all 0.2s;
		overflow: hidden;
	}

	label {
		font-size: 0.9rem;
		font-weight: 400;
		color: var(--color-title);
	}

	input[type='number']::-webkit-outer-spin-button,
	input[type='number']::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type='number'] {
		-moz-appearance: textfield;
		appearance: textfield;
	}

	input {
		width: 100%;
		background: transparent;
		min-height: 40px;
		height: 100%;
		line-height: normal;
		padding: 0 48px;
		border: none;
		color: var(--color-bg-dark);
		font-size: 1.2rem;
		transition: all 0.2s ease-in-out;
		outline: none;
		text-align: center;
	}

	.submit-icon {
		position: absolute;
		background: transparent;
		right: 0;
		border: none;
		color: var(--color-bg-dark);
		cursor: pointer;
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.75;
		transition:
			opacity 0.2s,
			transform 0.2s;
	}

	.submit-icon:hover:not(:disabled) {
		opacity: 1;
		transform: translateX(2px);
	}

	.submit-icon:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.all-caps {
		text-transform: uppercase;
	}

	.focussed input {
		border-color: var(--color-bg-light);
	}

	.has-error input {
		border-color: #ff4d4d;
	}

	.error-message {
		color: #ff4d4d;
		font-size: 1rem;
		text-align: center;
	}
</style>
