<script>
 import { goto } from '$app/navigation';

 import {
     Spinner,
 } from 'sveltestrap';

 import { getQAView } from '$lib/todo';
 import { getExerciceQA } from '$lib/qa';
 import { exercicesIdx } from '$lib/stores/exercices';
 import { themesIdx } from '$lib/stores/themes';

 export { className as class };
 let className = '';

 export let team = null;

 function show(id) {
     goto("exercices/" + id)
 }

 let my_exercices = [];
 let my_exercicesP = update_exercices()
 setInterval(() => my_exercicesP = update_exercices(), 62000);

 async function update_exercices() {
     const view = await getQAView(team);
     my_exercices = [];

     for (const v of view) {
         v.queries = null;
         v.queriesNSolved = 0;
         v.queriesNClosed = 0;
         getExerciceQA(v.id_exercice).then((queries) => {
             v.queries = queries;
             for (const q of queries) {
                 if (q.solved == null) v.queriesNSolved++;
                 if (q.closed == null) v.queriesNClosed++;
             }
             my_exercices.push(v);
             my_exercices = my_exercices;
         });
     }
 }
</script>

<div class={className}>
    <button
        class="btn btn-dark float-end"
        on:click|preventDefault={() => my_exercicesP = update_exercices()}
    >
        ↻
    </button>
    <h3>
        {#if team}
            Étapes de l'équipe
        {:else}
            Vos étapes
        {/if}
    </h3>
    {#await my_exercicesP}
        <div class="text-center">
            <Spinner size="lg" />
        </div>
    {:then}
        <table class="table table-stripped table-hover">
            <thead>
                <tr>
                    <th>Défi</th>
                    <th>Requêtes</th>
                </tr>
            </thead>
            <tbody>
                {#each my_exercices as todo (todo.id)}
                    <tr
                        class:table-success={todo.queries && todo.queries.length > 0}
                        class:table-warning={todo.queriesNSolved > 0}
                        on:click={() => show(todo.id_exercice)}
                    >
                        <td>
                            {#if $exercicesIdx.length == 0 && $themesIdx.length == 0}
                                <Spinner size="sm" />
                            {:else if $themesIdx[$exercicesIdx[todo.id_exercice]]}
                                <a href="themes/{$exercicesIdx[todo.id_exercice].id_theme}">
                                    {$themesIdx[$exercicesIdx[todo.id_exercice].id_theme].name}
                                </a>
                                &ndash;
                            {/if}
                            {#if $exercicesIdx.length == 0}
                                <Spinner size="sm" />
                            {:else if $exercicesIdx[todo.id_exercice]}
                                {$exercicesIdx[todo.id_exercice].title}
                            {/if}
                        </td>
                        <td>
                            {#if todo.queries && todo.queries.length}
                                {todo.queriesNSolved} / {todo.queriesNClosed}
                            {:else}
                                0
                            {/if}
                        </td>
                    </tr>
                {/each}
            </tbody>
        </table>
    {/await}
</div>
