<script>
    import { createEventDispatcher, onMount } from 'svelte';
    const dispatch = createEventDispatcher();

    export let column;
    export let active;

    let options = [];

    let selected; // internal value

    onMount(() => {
        options = column.values().map((val, i) => ({
            index: i,
            value: column.raw()[i]
        }));
        selected = getSelectedItem($active);
    });

    function change() {
        $active = options.indexOf(selected);
        selected = getSelectedItem($active);
        dispatch('change', selected);
    }

    function getSelectedItem(selectedIndex) {
        return options.length ? options[selectedIndex] : null;
    }
</script>

<style>
    .filter-ui.filter-select {
        vertical-align: middle;
        max-width: 100%;
    }
</style>

<select bind:value={selected} on:change={change} class="filter-ui filter-select">
    {#each options as opt}
        <option value={opt}>{String(opt.value).trim()}</option>
    {/each}
</select>
