<script>"use strict";
import { createEventDispatcher } from "svelte";
import Icon from "./Icon.svelte";
import Dropdown from "./Dropdown.svelte";
export let placeholder = "Search...";
export let buttonText = void 0;
export let buttonIcon = void 0;
export let disabled = false;
export let dropdownItems = void 0;
export let dropdownButtonText = void 0;
let inputState = "empty";
let inputValue = "";
const dispatch = createEventDispatcher();
function handleInput(event) {
  const target = event.target;
  inputValue = target.value;
  inputState = inputValue === "" ? "empty" : "active";
  dispatch("input", { value: inputValue });
}
</script>

<form class:opacity-30={disabled}>
	<div class="flex items-center h-11">
		{#if dropdownItems && dropdownButtonText}
			<div class="h-full mr-1">
				<Dropdown items={dropdownItems} buttonText={dropdownButtonText} />
			</div>
		{/if}
		<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">
			Search
		</label>
		<div class="relative flex">
			<div class="absolute inset-y-0 start-0 flex items-center pl-4 pointer-events-none">
				<Icon iconName="search" color="stone" size="md" />
			</div>
			<input
				type="text"
				id="default-search"
				{placeholder}
				required
				{disabled}
				bind:value={inputValue}
				class="block w-full p-2.5 ps-12 text-2xl text-stone-950 border rounded-lg"
				class:border-stone-700={inputState === 'active'}
				class:ring-1={inputState === 'active'}
				class:ring-stone-700={inputState === 'active'}
				class:border-stone-300={inputState === 'empty' || inputState === 'filled'}
				class:focus:ring-2={inputState !== 'filled' && inputState !== 'active'}
				class:focus:ring-sky-500={inputState !== 'filled' && inputState !== 'active'}
				class:focus:ring-1={inputState === 'filled'}
				class:focus:ring-stone-700={inputState === 'filled'}
				on:focus={() => (inputState = inputValue === '' ? 'empty' : 'filled')}
				on:blur={() => (inputState = inputValue === '' ? 'empty' : 'filled')}
				on:input={handleInput}
			/>
			{#if buttonIcon || buttonText}
				<button
					type="submit"
					class="flex items-center gap-2 py-2.5 ms-1 text-white bg-stone-700 rounded-full"
					class:px-3={buttonIcon}
					class:px-5={buttonText}
					{disabled}
				>
					{#if buttonIcon}
						<Icon iconName={buttonIcon} color="base" size="md" />
					{:else if buttonText}
						{buttonText}
					{/if}
				</button>
			{/if}
		</div>
	</div>
</form>

<style>
	input::-moz-placeholder {
		color: #a8a29e;
		font-size: 1rem;
		font-weight: 400;
	}
	input::placeholder {
		color: #a8a29e;
		font-size: 1rem;
		font-weight: 400;
	}
	[type='text']:focus {
		border-color: unset;
		box-shadow: none;
	}
</style>
