<script>
    import { t } from '../translations.svelte.js';
    import { checkUser } from '../user.svelte.js';

    let { fetchOptions, key, value, onUpdate } = $props();

    let options = $state([]);

    async function loadOptions(){
        const resp = await fetchOptions();
        const arr = await resp.json();
        for (let entry of arr){
            const value = entry.value;
            const caption = entry.caption ? entry.caption : value;
            options.push({caption:caption,value:value})
        }
    }

    function propagate(){
        let changeset = {}
        changeset[key] = value;
        onUpdate(changeset);
    }
</script>

{#if options.length > 0}
    <select bind:value onchange={propagate} >
        {#each options as entry,i}
        <option value={entry.value}>{entry.caption}</option>
        {/each}
    </select>
{:else}
    <span onclick={loadOptions}>{value}</span>
{/if}
