<script lang="ts">
 import { goto } from '$app/navigation';

 import { user } from '$lib/stores/user';
 import DateFormat from '$lib/components/DateFormat.svelte';
 import SurveyBadge from '$lib/components/SurveyBadge.svelte';
 import ScoreBadge from '$lib/components/ScoreBadge.svelte';
 import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';
 import { getCategories } from '$lib/categories';
 import { getSurveys } from '$lib/surveys';
 import { getScore } from '$lib/users';

 export let allworks = false;

 let req_surveys = getSurveys(allworks);
 export let direct = null;

 req_surveys.then((surveys) => {
     for (const survey of surveys) {
         if (survey.direct != null) {
             direct = survey;
         }
     }
 });

 let categories = {};
 getCategories().then((cs) => {
     for (const c of cs) {
         categories[c.id] = c;
     }
 });

 function gotoSurvey(survey) {
     if (survey.kind === "w") {
         goto(`works/${survey.id}`);
     } else if (survey.direct != null) {
         goto(`surveys/${survey.id}/live`);
     } else if ($user.is_admin) {
         goto(`surveys/${survey.id}/responses`);
     } else {
         goto(`surveys/${survey.id}`);
     }
 }
</script>

<table class="table table-striped table-hover mb-0">
  <thead>
    <tr>
      <th>Intitulé</th>
      <th>Date</th>
      {#if $user}
          {#if $user.is_admin}
              <th>À corriger</th>
          {:else}
              <th>Score</th>
          {/if}
      {/if}
    </tr>
  </thead>
  {#await req_surveys}
      <tr>
          <td colspan="5" class="text-center py-3">
              <div class="spinner-border mx-3" role="status"></div>
              <span>Chargement des questionnaires &hellip;</span>
          </td>
      </tr>
  {:then surveys}
      <tbody style="cursor: pointer;">
          {#each surveys as survey, sid (survey.kind + survey.id)}
              {#if (survey.shown || survey.direct == null || ($user && $user.is_admin)) && (!$user || (!$user.was_admin || $user.promo == survey.promo) || $user.is_admin)}
                  {#if $user && $user.is_admin && (sid == 0 || surveys[sid-1].promo != survey.promo)}
                      <tr class="bg-warning text-light">
                          <th colspan="5" class="fw-bold">
                              {survey.promo}
                          </th>
                      </tr>
                  {/if}
                  {#if $user && (sid == 0 || surveys[sid-1].id_category != survey.id_category) && categories[survey.id_category]}
                      <tr class="bg-primary text-light">
                          <th
                              colspan="5"
                              class="fw-bold"
                              on:click={() => categories[survey.id_category].expand = !categories[survey.id_category].expand}
                              on:keypress={() => categories[survey.id_category].expand = !categories[survey.id_category].expand}
                          >
                              {#if categories[survey.id_category].expand}
                                  <i class="bi bi-chevron-down"></i>
                              {:else}
                                  <i class="bi bi-chevron-right"></i>
                              {/if}
                              {categories[survey.id_category].label}
                              {#if $user && $user.is_admin}
                                  <a href="categories/{survey.id_category}" class="float-end btn btn-sm btn-light" style="margin: -6px;">
                                      <i class="bi bi-pencil"></i>
                                  </a>
                              {/if}
                          </th>
                      </tr>
                  {/if}
                  {#if categories[survey.id_category] && categories[survey.id_category].expand}
                  <tr
                      on:click={e => gotoSurvey(survey)}
                      on:keypress={e => gotoSurvey(survey)}
                  >
                      <td>
                          {#if !survey.shown}<i class="bi bi-eye-slash-fill" title="Ce questionnaire n'est pas affiché aux étudiants"></i>{/if}
                          {survey.title}
                          {#if survey.group}<span class="badge bg-secondary">{survey.group}</span>{/if}
                          {#if $user && survey.kind === "w" && survey.startAvailability() < Date.now()}
                              <SubmissionStatus work={survey} user={$user} />
                          {/if}
                          <SurveyBadge {survey} class="float-end" />
                      </td>
                      {#if survey.startAvailability() > Date.now()}
                          <td title="Disponible à partir du {survey.start_availability}">
                              <DateFormat date={survey.start_availability} dateStyle="medium" timeStyle="medium" />
                              <i class="bi bi-arrow-bar-right"></i>
                          </td>
                      {:else}
                          <td title="Sera fermé le {survey.start_availability}">
                              <i class="bi bi-arrow-bar-left"></i>
                              <DateFormat date={survey.end_availability} dateStyle="medium" timeStyle="medium" />
                          </td>
                      {/if}
                      {#if $user}
                          {#if !survey.corrected && !$user.is_admin}
                              <td>N/A</td>
                          {:else}
                              <td>
                                  {#await getScore(survey)}
                                      <div class="spinner-border spinner-border-sm" role="status"></div>
                                  {:then score}
                                      {#if score.count !== undefined}
                                          <span
                                              class:fw-bolder={score.count-score.corrected > 0}
                                              class:badge={survey.corrected}
                                              class:bg-danger={survey.corrected && score.count-score.corrected > 0}
                                              class:bg-dark={survey.corrected && score.count-score.corrected <= 0}
                                              title="{score.count-score.corrected}/{score.count}"
                                          >
                                              {#if score.count == 0 || score.corrected == 0 || survey.corrected}
                                                  {score.count-score.corrected}
                                              {:else}
                                                  {Math.trunc((1-score.corrected/score.count)*100)}&nbsp;%
                                              {/if}
                                          </span>
                                      {:else}
                                          <ScoreBadge score={score.score} />
                                      {/if}
                                  {:catch error}
                                      <i class="bi text-warning bi-exclamation-triangle-fill" title={error}></i>
                                  {/await}
                              </td>
                          {/if}
                      {/if}
                  </tr>
                  {/if}
              {/if}
          {/each}
      </tbody>
  {/await}
  {#if $user && $user.is_admin}
      <tfoot>
          <tr>
              <td colspan="4">
	          <a href="surveys/new" class="btn btn-sm btn-primary">Ajouter un questionnaire</a>
              </td>
          </tr>
      </tfoot>
  {/if}
</table>
