<script>

    import Selectlist from "./Selectlist.svelte";
    import Icon from "../common/Icon.svelte";

    let searchEl;
    let search;
    export let value;
    export let field;

    function handleSelect(){
        searchEl.focus();
        searchEl.blur()
    }
</script>


<div class="autocomplete">
    <input
            type="search"
            bind:value={search}
            bind:this={searchEl}
            placeholder="Search for options"
            autocomplete="off"
    />
    <div class="autocomplete-results">
        <Selectlist
                {field}
                bind:value
                bind:search
                on:selected={handleSelect}
        />
    </div>
</div>
{#if value}
    <div  class="autocomplete-selected-value">
        {#if Array.isArray(field.selectOptions)}
            {value}
        {:else}
            {field.selectOptions[value]}
        {/if}
        <button
                on:click|preventDefault={(e) => (value = "")}
                type="button"
                class="button-text"
                aria-label="Close"
        >
            <Icon width={12} height={12} icon="close"></Icon>
        </button>

    </div>
{/if}