<script lang="ts">
 import Chart from 'svelte-frappe-charts';

 let className = '';
 export { className as class };

 export let question = null;

 function refreshProposals() {
     let req = question.getProposals();

     req.then((proposals) => {
         const proposal_idx = { };
         for (const proposal of proposals) {
             data.labels.push(proposal.label);
             data.datasets[0].values.push(0);
             proposal_idx[proposal.id] = new String(data.labels.length - 1);
         }

         req_responses = question.getResponses();
         req_responses.then((responses) => {
             for (const res of responses) {
                 const rsplt = res.value.split(',');
                 for (const r of rsplt) {
                     data.datasets[0].values[proposal_idx[r]] += 1;
                 }
             }
         });
     });

     return req;
 }
 let req_proposals = null;
 export let proposals = null;
 let req_responses = null;
 let mean = null;

 export let data = {
     labels: [],
     datasets: [
         {
             values: []
         }
     ]
 };

 if (!proposals) {
     if (question.kind && (question.kind == "int" || question.kind.startsWith("list"))) {
         req_responses = question.getResponses();
         req_responses.then((responses) => {
             const values = [];
             const proposal_idx = { };
             for (const response of responses) {
                 let ress = [];
                 if (question.kind.startsWith("list")) {
                     ress = response.value.split('\n');
                 } else {
                     ress.push(response.value);
                 }
                 for (const res of ress) {
                     if (res == "") continue;
                     if (proposal_idx[res]) {
                         data.datasets[0].values[proposal_idx[res]] += 1;
                         values.push(Number(res));
                     } else {
                         data.labels.push(res);
                         data.datasets[0].values.push(1);
                         proposal_idx[res] = new String(data.labels.length - 1);
                     }
                 }
             }
             if (question.kind == "int") {
                 mean = Math.trunc(values.reduce((p, e) => p + e) / values.length*10)/10;
             }
         });
     } else {
         req_proposals = refreshProposals();
     }
 }
</script>

<div class="{className}">
    {#await req_proposals}
        <div class="text-center mt-4">
            <div class="spinner-border text-primary mx-3" role="status"></div>
            <span>Récupération des propositions&hellip;</span>
        </div>
    {:then}
        {#await req_responses}
            <div class="text-center mt-4">
                <div class="spinner-border text-primary mx-3" role="status"></div>
                <span>Récupération des réponses&hellip;</span>
            </div>
        {:then}
            {#if mean !== null}
                <div class="text-center">
                    Moyenne représentative&nbsp;: <strong>{mean}</strong>
                </div>
            {/if}
            {#if question.kind === "mcq"}
                <Chart data={data} type="bar" />
            {:else if question.kind === "list"}
                <Chart data={data} type="pie" />
            {:else}
                <Chart data={data} type="pie" maxSlices="9" />
            {/if}
        {/await}
    {/await}
</div>
