<script>
    import FilterButtons from './filter/FilterButtons.svelte';
    import FilterSelect from './filter/FilterSelect.svelte';
    import FilterTimescale from './filter/FilterTimescale.svelte';
    import { writable } from 'svelte/store';

    const active = writable(0);

    export let vis;
    export let type;
    export let column;
    export let textDirection;

    const TYPE_AUTO = 'auto';
    const TYPE_SELECT = 'select';
    const TYPE_BUTTONS = 'buttons';
    const TYPE_TIMESCALE = 'timescale';

    $: filterType =
        type === TYPE_AUTO
            ? column.type() === 'date'
                ? TYPE_TIMESCALE
                : column.length < 6
                ? TYPE_BUTTONS
                : TYPE_SELECT
            : type;

    const postEvent = vis.chart().createPostEvent();

    function change(event) {
        vis.__lastRow = $active;
        vis.update();
        postEvent('column:change', event.detail);
        vis.fire('column:change', event.detail);
    }
</script>

<style>
    :global(.filter-ui) {
        margin-bottom: 10px;
    }
    div {
        overflow: hidden;
    }
</style>

<div>
    {#if filterType === TYPE_BUTTONS}
        <FilterButtons {active} {column} {textDirection} on:change={change} />
    {:else if filterType === TYPE_TIMESCALE}
        <FilterTimescale {active} {column} {textDirection} on:change={change} />
    {:else}
        <FilterSelect {active} {column} {textDirection} on:change={change} />
    {/if}
</div>
