<script>
    import { t }    from '../translations.svelte.js'
    import { tick } from "svelte";


    let {
        id            = null,
        autofocus     = false,
        getCandidates = dummyGetCandidates,
        onCommit      = dummyOnCommit,
        onSelect      = dummyOnSelect,
        candidate     = $bindable({ display : '' })
    } = $props();

    const ignore   = ['ArrowLeft','ArrowRight'];
    //let candidate  = $state({ display : '' });
    let selected   = $state([]);
    let candidates = $derived(getCandidates(candidate.display));

    async function dummyGetCandidates(text){
        console.warn(`getCandidates(${text}) not overridden!`);
        if (!text) return [];
        return [
            {
                display     : 'candidate 1',
                explanation : 'candidates need to have a display field'
            },
            {
                display    : 'candidate 2',
                additional : 'other fields are optional',
                more       : 'and may be domain specific'
            },
            { display : text }
        ];
    }

    function dummyOnCommit(candidate){
        // if Enter is pressed on the input field, this method gets called with
        // either the selected candidate or
        // an anonymous object with the entered text in the display field
        console.warn(`onCommit(${JSON.stringify(candidate)}) not overridden!`);
        // if the method returns true, the field will be cleared after committing
        return true;
    }

    function dummyOnSelect(candidate){
        console.warn(`${candidate.display} selected, but onSelect not overridden!`)
    }

    async function ondblclick(evt){
        const select = evt.target;
        const idx    = select.value;
        candidate = candidates[idx];
        candidates = [];
        selected = [];
        onSelect(candidate);
    }

    async function onkeyup(ev){
        if (ignore.includes(ev.key)) return;
        if (ev.key == 'ArrowDown'){
            ev.preventDefault();
            selected = selected.length < 1 ? [0] : [selected[0]+1]
            if (selected[0] >= candidates.length) selected = [0];
            return false;
        }
        if (ev.key == 'ArrowUp'){
            ev.preventDefault();
            selected = selected.length < 1 ? [-1] : [selected[0]-1]
            if (selected[0] < 0) selected = [candidates.length-1];
            return false;
        }
        if (ev.key == 'Enter'|| ev.key == 'Tab'){
            ev.preventDefault();
            if (selected.length>0) {
                candidate = candidates[selected[0]];
                candidates = [];
                selected = [];
                onSelect(candidate);
                return false;
            }
            if (ev.key == 'Enter') {
                candidates = [];
                selected = [];
                if (onCommit(candidate)) candidate = { display : '' };
            }
            return false;
        }
        if (ev.key == 'Escape'){
            ev.preventDefault();
            candidates = [];
            selected = [];
            return false;
        }

        candidate = { display : candidate.display };
        candidates = await getCandidates(candidate.display);
        if (selected>candidates.length) selected = candidates.length;
        return false;
    }
</script>

<style>
    span { position : relative }
    select { position : absolute; top: 30px; left: 3px; }

    select { background: black; color: orange; border: 1px solid orange; border-radius: 5px; z-index: 50; }
    option:checked { background: orange; color: black; }
</style>

<span>
    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} {id} />
    {#if candidates && candidates.length > 0}
    <select bind:value={selected} {ondblclick} multiple tabindex="-1">
        {#each candidates as candidate,i}
        <option value={i}>{candidate.display}</option>
        {/each}
    </select>
    {/if}
</span>