<script>
    import { t } from '../../translations.svelte.js';
    import EstimateList from './EstimateList.svelte';
    import ItemList from './ItemList.svelte';
    import TimeList from './TimeList.svelte';

    let { close = () => {}, doc = $bindable({}), onSelect = (item) => {} } = $props();

    let select = $state(0);

    function estimateSelected(estimate){
        onSelect({task:estimate});
        close();
    }

    function itemSelected(item){
        onSelect({item:item});
        close();
    }
</script>

<style>
    div{
        position: fixed;
        top: 0;
        bottom: 20px;
        left: 0;
        right: 0;
        padding: 10px;
        overflow: auto;

    }
    span{
        position: sticky;
        top: 0;
    }
</style>

<div class="position_selector">
    <span class="tabs">
        <button onclick={() => select=0}>{t('document.items')}</button>
        <button onclick={() => select=1}>{t('document.estimated_times')}</button>
        <button onclick={() => select=2}>{t('document.timetrack')}</button>
        <button onclick={close}>{t('document.abort')}</button>
    </span>
    {#if select == 0}
    <ItemList company_id={doc.company.id} onSelect={itemSelected} />
    {:else if select == 1}
    <EstimateList company_id={doc.company.id} onSelect={estimateSelected}  />
    {:else}
    <TimeList />
    {/if}
</div>