<script>
 import { CorrectionTemplate } from '../lib/correctionTemplates';

 let className = '';
 export { className as class };
 export let cts = null;
 export let nb_responses = 0;
 export let question = null;
 export let templates = [];

 export let filter = "";

 function addTemplate() {
     const ct = new CorrectionTemplate()
     if (question) {
         ct.id_question = question.id;
     }
     templates.push(ct);
     templates = templates;
 }

 function delTemplate(tpl) {
     tpl.delete().then(() => {
         const idx = templates.findIndex((e) => e.id === tpl.id);
         if (idx >= 0) {
             templates.splice(idx, 1);
         }
         templates = templates;
     });
 }

 function submitTemplate(tpl) {
     tpl.save().then(() => {
         templates = templates;
     });
 }
</script>

<div class="{className}">
    {#each templates as template (template.id)}
        <form class="row mb-2" on:submit|preventDefault={() => submitTemplate(template)}>
            <div class="col-2">
                <div class="input-group">
                    <input
                        placeholder="RegExp"
                        class="form-control"
                        class:bg-warning={template.regexp && template.regexp === filter}
                        bind:value={template.regexp}
                    >
                    <button
                        type="button"
                        class="btn btn-sm"
                        class:btn-outline-secondary={!template.regexp || template.regexp !== filter}
                        class:btn-outline-warning={template.regexp && template.regexp === filter}
                        on:click={() => { if (filter == template.regexp) filter = ''; else filter = template.regexp; } }
                    >
                        <i class="bi bi-filter"></i>
                    </button>
                </div>
            </div>
            <div class="col-2">
                <input placeholder="Intitulé" class="form-control" bind:value={template.label}>
            </div>
            <div class="col-1">
                <input
                    type="number"
                    placeholder="-12"
                    class="form-control"
                    bind:value={template.score}
                >
            </div>
            <div class="col">
                <textarea
                    placeholder="Explication pour l'étudiant"
                    class="form-control form-control-sm"
                    bind:value={template.score_explaination}
                ></textarea>
            </div>
            <div class="col-1 d-flex flex-column">
                <div class="text-end">
                    {#if cts && template.id && cts[template.id.toString()]}
                        {Math.trunc(Object.keys(cts[template.id.toString()]).length/nb_responses*1000)/10}&nbsp;%
                    {:else}
                        N/A
                    {/if}
                </div>
                <div class="d-flex justify-content-between">
                    <button
                        type="button"
                        class="btn btn-sm btn-danger"
                        on:click={() => delTemplate(template)}
                    >
                        <i class="bi bi-trash"></i>
                    </button>
                    <button
                        class="btn btn-sm btn-success"
                    >
                        <i class="bi bi-check"></i>
                    </button>
                </div>
            </div>
        </form>
    {/each}
    <button
        type="button"
        class="btn btn-info me-1"
        on:click={addTemplate}
        disabled={templates.length > 0 && !templates[templates.length-1].id}
    >
        <i class="bi bi-plus"></i> Ajouter un template
    </button>
</div>
