<script>
    import { onMount } from 'svelte';

    import { api }     from '../../urls.svelte.js';
    import { error, yikes }  from '../../warn.svelte';
    import { t }       from '../../translations.svelte.js';

    import EstimatedTask from '../../Components/EstimatedTask.svelte';

    let {
        company_id,
        onSelect = (task) => {}
    } = $props();

    let projects = $state(null);

    async function loadItems(){
        const url  = api('task/estimated_times');
        let data   = { company_id: company_id };
        const resp = await fetch(url,{
            credentials: 'include',
            method     : 'POST',
            body       : JSON.stringify(data)
        });
        if (resp.ok){
            projects = await resp.json();
            yikes();
        } else {
            error(resp);
        }
    }

    onMount(loadItems);

</script>

<style>
    :global(.estimate){
        border: 1px solid;
        padding: 4px;
        border-radius: 4px;
    }
</style>

<div>
    <h1>{t('estimated_times')}</h1>
    {#if projects}
    {#each projects as project,pid}
    <fieldset>
        <legend>{project.name}</legend>
        {#each project.tasks as task,tid}
        <ul>
            <li>
                <EstimatedTask {task} {onSelect} />
            </li>
        </ul>
        {/each}
    </fieldset>
    {/each}
    {/if}
</div>
