<script>
 import CorrectionPieChart from './CorrectionPieChart.svelte';

 export let responses = {};
 export let users = {};

 let res = {};
 let labels = [];
 let graph_data = { labels, datasets:[{values: []}] };
 $: {
     res = { };
     labels = [];
     responses = responses;
     for (const user in responses) {
         for (const ures of responses[user].split('\n')) {
             if (ures === "") continue;

             if (res[ures] === undefined) {
                 res[ures] = [];
             }
             res[ures].push(user);

             if (res[ures].length == 2) {
                 labels.push(ures);
             }
         }
     }

     labels.sort((a,b) => (res[a].length - res[b].length))
     graph_data.labels = labels;
     graph_data.datasets[0].values = labels.map((l) => res[l].length);
     console.log(graph_data);
 }
</script>

<CorrectionPieChart
    question={{kind: 'list'}}
    proposals={[]}
    data={graph_data}
/>
<div class="card mb-4">
    <ul class="list-group list-group-flush">
        {#each labels as rep, rid (rid)}
            <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                <span>
                    {rep}
                </span>
                <div>
                    {#each res[rep] as user}
                    <a href="users/{user}" target="_blank" class="badge bg-dark rounded-pill">
                        {#if users && users[user]}
                            {users[user].login}
                        {:else}
                            {user}
                        {/if}
                    </a>
                    {/each}
                </div>
            </li>
        {/each}
        {#each Object.keys(res) as rep, rid (rid)}
            {#if labels.indexOf(rep) == -1}
                <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                    <span>
                        {rep}
                    </span>
                    <a href="users/{res[rep]}" target="_blank" class="badge bg-dark rounded-pill">
                        {#if users && users[res[rep]]}
                            {users[res[rep]].login}
                        {:else}
                            {res[rep]}
                        {/if}
                    </a>
                </li>
            {/if}
        {/each}
    </ul>
</div>
