<script>
 import { user } from '$lib/stores/user';
 import { autoCorrection } from '$lib/correctionTemplates';

 export let cts = null;
 export let rid = 0;
 export let response = null;
 export let templates = [];

 let my_tpls = { };
 let my_correction = null;

 function submitCorrection() {
     if (response.score === undefined || response.score === null) {
         if (my_correction && my_correction.score !== undefined) {
             response.score = my_correction.score;
         } else {
             response.score = 100;
         }
     }

     if (response.score_explaination === undefined || response.score_explaination === null) {
         if (my_correction && my_correction.score_explaination !== undefined) {
             response.score_explaination = my_correction.score_explaination;
         }
     }

     response.id_corrector = $user.id
     response.time_scored = (new Date()).toISOString()

     response.save().then((res) => {

     });
 }

 $: {
     if (cts && templates && response && response.id_user) {
         for (const t of templates) {
             if (my_tpls[t.id] === undefined && cts[t.id.toString()]) {
                 my_tpls[t.id] = cts[t.id.toString()][response.id_user] !== undefined;
             }
         }
     }
 }
</script>

<form
    class="row"
    on:submit|preventDefault={submitCorrection}
>
    <div class="col-auto">
        <button
            class="btn btn-success me-1"
            class:mt-4={rid%2}
        >
            <i class="bi bi-check"></i>
        </button>
    </div>
    <div class="col-7">
        <div class="row row-cols-3">
            {#each templates as template (template.id)}
                <div class="form-check">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        id="r{response.id}t{template.id}"
                        on:change={() => {my_tpls[template.id] = !my_tpls[template.id]; autoCorrection(response.id_user, my_tpls).then((r) => my_correction = r); }}
                        checked={my_tpls[template.id]}
                    >
                    <label
                        class="form-check-label"
                        for="r{response.id}t{template.id}"
                    >
                        {template.label}
                    </label>
                </div>
            {/each}
        </div>
    </div>
    <div class="col">

        <div class="input-group mb-2">
            <input
                type="number"
                class="form-control"
                placeholder="Score"
                bind:value={response.score}
            >
            {#if my_correction}
                <button
                    type="button"
                    class="btn btn-light"
                    on:click={() => { response.score = my_correction.score; response.score_explaination = my_correction.score_explaination; }}
                >
                    {my_correction.score}
                </button>
            {/if}
            <span class="input-group-text">/100</span>
        </div>

        <textarea
            class="form-control mb-2"
            placeholder="Appréciation"
            bind:value={response.score_explaination}
        ></textarea>
    </div>
</form>
{#if my_correction}
    <div
        class="alert row mt-1 mb-0"
        class:bg-success={my_correction.score > 100}
        class:alert-success={my_correction.score >= 95 && my_correction.score <= 100}
        class:alert-info={my_correction.score < 95 && my_correction.score >= 70}
        class:alert-warning={my_correction.score < 70 && my_correction.score >= 45}
        class:alert-danger={my_correction.score < 45}
    >
        <strong class="col-auto">
            {my_correction.score}&nbsp;%
        </strong>
        <div class="col">
            {my_correction.score_explaination}
        </div>
    </div>
{/if}
