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

 import {
     Spinner,
 } from 'sveltestrap';

 import { getExerciceTested, getQAWork } from '$lib/todo'
 import { exercicesIdx } from '$lib/stores/exercices'
 import { themesIdx } from '$lib/stores/themes'
 import { todos } from '$lib/stores/todo'

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

 export let team = null;

 let teamtodos = todos;
 $: teamtodos = team ? team.todos : todos;

 let exo_doneP = getExerciceTested(team);
 let tododone = { };

 getQAWork(team).then((queries) => {
     for (const q of queries) {
         tododone[q.id_exercice] = q;
     }
 })

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

<div class={className}>
    <button
        class="btn btn-dark float-end"
        on:click|preventDefault={() => { todos.refresh(); exo_doneP = getExerciceTested(team); }}
    >
        ↻
    </button>
    <h3>Étapes à tester et valider</h3>
    {#await teamtodos.refresh()}
        <div class="text-center">
            <Spinner size="lg" />
        </div>
    {:then}
        {#await exo_doneP}
            <div class="text-center">
                <Spinner size="lg" />
            </div>
        {:then exo_done}
            <table class="table table-stripped table-hover">
                <thead>
                    <tr>
                        <th>Avancement</th>
                        <th>Scénario</th>
                        <th>Défi</th>
                    </tr>
                </thead>
                <tbody>
                    {#each $teamtodos as todo (todo.id)}
                        <tr
                            style:cursor="pointer"
                            class:text-light={!tododone[todo.id_exercice] && !exo_done[todo.id_exercice]}
                            class:table-dark={!tododone[todo.id_exercice] && !exo_done[todo.id_exercice]}
                            class:table-warning={!tododone[todo.id_exercice] && exo_done[todo.id_exercice] == 'access'}
                            class:table-info={!tododone[todo.id_exercice] && (exo_done[todo.id_exercice] == 'tried' || exo_done[todo.id_exercice] == 'solved')}
                            class:table-success={tododone[todo.id_exercice]} on:click={() => show(todo.id_exercice)}
                        >
                            <td>
                                {#if tododone[todo.id_exercice]}
                                    Commenté
                                    {#if !exo_done[todo.id_exercice] || exo_done[todo.id_exercice] != 'solved'}
                                        mais pas testé/terminé
                                    {/if}
                                {:else if exo_done[todo.id_exercice] && exo_done[todo.id_exercice] != 'access'}
                                    À commenter
                                {:else}
                                    À tester
                                {/if}
                            </td>
                            <td>
                                {#if $exercicesIdx.length == 0 && $themesIdx.length == 0}
                                    <Spinner size="sm" />
                                {:else}
                                    <a href="themes/{$exercicesIdx[todo.id_exercice].id_theme}">
                                        {$themesIdx[$exercicesIdx[todo.id_exercice].id_theme].name}
                                    </a>
                                {/if}
                            </td>
                            <td>
                                {#if $exercicesIdx.length == 0}
                                    <Spinner size="sm" />
                                {:else}
                                    {$exercicesIdx[todo.id_exercice].title}
                                {/if}
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        {/await}
    {/await}
</div>
