<script lang="ts">
  import type { Member, ParcoursRead } from "../../types/room.type";
  import { getContext } from "svelte";
  import type { Writable } from "svelte/store";
  import IoIosArrowDown from "svelte-icons/io/IoIosArrowDown.svelte";
  import { goto } from "$app/navigation";
  import { parseTimer } from "../../utils/utils";
  import IoMdOpen from "svelte-icons/io/IoMdOpen.svelte";

  const parcours: Writable<ParcoursRead | null> = getContext("parcours");
  const member: Writable<Member | null> = getContext("member");

  let selected = "";

</script>

{#if $parcours != null && $member != null}
  <div class="trylist">
    {#if Object.keys($parcours.challenges).length == 0}
      <p class="italic">Aucun essai effectué :(</p>
    {/if}

    {#each Object.entries($parcours.challenges) as [id, chall]}
      <p
        on:click={() => {
					selected = selected == chall.challenger.id_code ? '' : chall.challenger.id_code;
				}}
        class:selected={selected == chall.challenger.id_code}
        class="tries"
        on:keydown={() => {}}
      >
        <span class="icon"><IoIosArrowDown /></span>
        {chall.challenger.id_code == $member.id_code ? 'Vos essais' : chall.challenger.name}
        <span class:valid = {chall.challenger.validated} class="validation-status">{chall.challenger.validated ? "Validé": "Non validé"}</span>
      </p>

      {#if selected == chall.challenger.id_code}
        {#each chall.challenges as c}
          <div
            class="try"
            on:click={() => {
							goto(`?${new URLSearchParams({corr: c.id_code}).toString()}`);
						}}
            on:keydown={() => {}}
            title="Voir la correction"
          >
            <p><span class:validated={c.validated} class:uncorriged={!c.isCorriged} class="note"
            >{c.mistakes} faute{c.mistakes > 1 ? "s" : ""} </span> en <strong>{c.time < $parcours.time * 60 ? parseTimer(c.time): parseTimer($parcours.time*60)} <span title={`Vous avez dépassé de ${parseTimer(c.time - $parcours.time*60)}`} class="time-overflow">{c.time > $parcours.time * 60? `( + ${parseTimer(c.time - $parcours.time*60)} )`:""}</span></strong>
            </p>
            <span class="corrige-link icon"><IoMdOpen /></span>
          </div>
        {/each}
      {/if}
    {/each}
  </div>
{/if}

<style lang="scss">
  .tries {
    cursor: pointer;
    display: flex;
    gap: 5px;
    align-items: center;
    transition: 0.3s;

    .icon {
      width: 20px;
      display: flex;
      align-items: center;
      transform: rotate(-90deg);
      transition: 0.2s;
    }
  }

  .selected {
    font-weight: 700;

    .icon {
      transform: rotate(0);
    }
  }

  .try {
    display: flex;
    gap: 10px;
    cursor: pointer;
    width: max-content;
    margin-left: 30px;

    p > span {
      color: $red;
      font-weight: 600;
    }
  }

  .icon {
    display: flex;
    align-items: center;
    width: 20px;
  }

  .corrige-link {
    color: $primary;
  }

  .uncorriged {
    color: grey;
    font-weight: 900;
  }

  .trylist {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .validation-status{
    color: $red;
    font-weight: 600;
    &::before{
      content: " - ";
    }
  }
  .validated, .valid {
    color: $green !important;
  }

  .time-overflow{
    color: $red;
    font-weight: 400;
    font-size: .8em;
  }


</style>
