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

 import {
     Button,
     Spinner,
 } from 'sveltestrap';

 import { QAQuery, QAStates } from '$lib/qa';
 import { ToastsStore } from '$lib/stores/toasts';

 export let theme = null;
 export let exercice = {};

 let newQuery = new QAQuery();

 let creationInProgress = false;
 function saveQuery() {
     newQuery.id_exercice = exercice.id;
     creationInProgress = true;
     const myContent = newQuery.content;
     if (!newQuery.content) newQuery.content = "";
     if (newQuery.difficulty)
         newQuery.content = "Difficulté : " + newQuery.difficulty + "\n" + newQuery.content;
     if (newQuery.timecount)
         newQuery.content = "Temps passé : " + newQuery.timecount + "\n" + newQuery.content;
     newQuery.save().then(async (res) => {
         newQuery = new QAQuery();
         creationInProgress = false;
         await invalidate(`api/exercices/${exercice.id}/qa`);
         goto(theme?`themes/${theme.id}/${exercice.id}/${res.id}`:`exercices/${exercice.id}/${res.id}`)
     }).catch((err) => {
         creationInProgress = false;
         newQuery.content = myContent;
         ToastsStore.addErrorToast({
             msg: err,
         })
     })
 }
</script>

<form on:submit|preventDefault={saveQuery} class="card mb-3">
    <div class="card-header">
        Qu'avez-vous pensé de cette étape&nbsp;?
    </div>
    <div class="card-body">
        <div class="mb-3 row">
            <label for="state" class="col-2 col-form-label col-form-label-sm">État</label>
            <div class="col-10">
	        <select class="form-select form-select-sm" id="state" bind:value={newQuery.state}>
                    {#each Object.keys(QAStates) as state}
                        <option value={state}>
                            {QAStates[state]}
                        </option>
                    {/each}
                </select>
            </div>
        </div>
        {#if newQuery.state == "timer"}
            <div class="mb-3 row">
                <label for="time-count" class="col-2 col-form-label col-form-label-sm">En combien de temps avez-vous résolu cet exercice&nbsp;?</label>
                <div class="col-10">
                    <input
                        type="text"
                        class="form-control form-control-sm"
                        id="time-count"
                        placeholder="10 minutes"
                        bind:value={newQuery.timecount}
                    >
                </div>
            </div>
            <div class="mb-3 row">
                <label for="difficulty" class="col-2 col-form-label col-form-label-sm">Comment jaugez-vous la difficulté de cet exercice&nbsp;?</label>
                <div class="col-10">
	            <select class="form-select form-select-sm" id="difficulty" bind:value={newQuery.difficulty}>
                        <option value="trop facile">Trop facile</option>
                        <option value="facile">Facile</option>
                        <option value="moyen">Moyen</option>
                        <option value="difficile">Difficile</option>
                        <option value="très difficile">Très difficile</option>
                        <option value="trop difficile">Trop difficile</option>
                        <option value="insane">Insane</option>
                    </select>
                </div>
            </div>
        {:else}
            <div class="mb-3 row">
                <label for="subject" class="col-2 col-form-label col-form-label-sm">Sujet</label>
                <div class="col-10">
                    <input
                        type="text"
                        class="form-control form-control-sm"
                        id="subject"
                        placeholder="Le pcap ne contient pas l'IP attendue"
                        bind:value={newQuery.subject}
                    >
                </div>
            </div>
        {/if}
        <div class="mb-3 row">
            <label for="description" class="col-2 col-form-label col-form-label-sm">Description</label>
            <div class="col-10">
                <textarea class="form-control form-control-sm" placeholder="Ajouter un commentaire" rows="2" id="description" bind:value={newQuery.content}></textarea>
            </div>
        </div>
        <Button
            type="submit"
            color="primary"
            class="float-end"
            disabled={creationInProgress}
        >
            {#if creationInProgress}
                <Spinner size="sm" />
            {/if}
            Soumettre
        </Button>
    </div>
</form>
