<script>
 import {
     Badge,
     CardBody,
     Column,
     Icon,
     Table,
 } from 'sveltestrap';

 import DateFormat from '$lib/components/DateFormat.svelte';

 import { my } from '$lib/stores/my.js';
 import { themes, exercices_idx } from '$lib/stores/themes.js';

 let req = null;
 function refresh_scores() {
     req = fetch('scores.json', {headers: {'Accept': 'application/json'}}).then((data) => data.json());
 }
 refresh_scores();

 export { className as class };
 let className = '';
</script>

{#await req}
    <CardBody>
        Veuillez patienter &hellips;
    </CardBody>
{:then scores}
    {#if scores}
        <Table class="{className} mb-0" hover striped rows={scores} let:row>
            <Column header="Heure">
                <DateFormat date={new Date(row.time)} />
            </Column>
            <Column header="Raison">
                {#if row.reason == "Validation"}
                    <Badge color="success"><Icon name="check" /></Badge>
                    Étape validée
                {:else if row.reason == "First blood"}
                    <Badge color="light"><Icon name="trophy" /></Badge>
                    Bonus premier sang
                {:else if row.reason == "Bonus flag"}
                    <Badge color="danger"><Icon name="flag-fill" /></Badge>
                    Flag bonus complété
                {:else if row.reason == "Tries"}
                    <Badge color="warning"><Icon name="backspace" /></Badge>
                    Malus nombre de tentatives
                {:else if row.reason == "Hint"}
                    <Badge color="info"><Icon name="lightbulb" /></Badge>
                    Indice dévoilé
                {:else if row.reason == "Display choices"}
                    <Badge color="secondary"><Icon name="info-square" /></Badge>
                    Échange champ de texte contre liste de choix
                {:else}
                    <Badge color="primary"><Icon name="question" /></Badge>
                    {row.reason}
                {/if}
                {#if row.id_exercice && $exercices_idx[row.id_exercice]}
                    sur <a href="/{$themes[$exercices_idx[row.id_exercice].id_theme].urlid}/{$exercices_idx[row.id_exercice].urlid}">
                        {$exercices_idx[row.id_exercice].title}
                    </a>
                {/if}
            </Column>
            <Column header="Détail">
                <span title="Valeur initiale (cette valeur est fixe)">{Math.trunc(10*row.points)/10}</span> &times; <span title="Coefficient multiplicateur (il varie selon les événements en cours sur la plateforme)">{row.coeff}</span>
            </Column>
            <Column header="Points">
                {Math.trunc(10*row.points * row.coeff)/10}
            </Column>
        </Table>
    {:else}
        Vous n'avez fait aucune action vous faisant gagner ou perdre des points.
    {/if}
    <button class="btn btn-primary" on:click={refresh_scores}>
        <Icon name="arrow-clockwise" />
    </button>
{:catch error}
    <CardBody>
        Une erreur s'est produite: {JSON.stringify(error)}
    </CardBody>
    <button class="btn btn-primary" on:click={refresh_scores}>
        <Icon name="arrow-clockwise" />
    </button>
{/await}
