<script>
    export let question;
    export let showResult = false;
    export let isCorrect = false;


    $: options = Object.keys(question.options).map(e => ({ key: e, value: question.options[e] }));

    let selected = [];
    $: isCorrect = selected.every(val => question.correct[val]);

    $: console.log("Selected:", selected, "showResult:", showResult, "isCorrect", isCorrect);


    function toggle(id) {
        if (selected.indexOf(id) < 0) {
            selected = [...selected, id];
        } else {
            selected = selected.filter(e => e !== id);
        }
    }

</script>
<h3>Select {question.correct.length}</h3>
{#each options as option}
    <div
        key={option.key}
        class:should={showResult && question.correct.indexOf(option.key) >= 0}
    >
        <label class="input-checkbox" for={option.key}>{option.value}
            <input
                type="checkbox" 
                id={option.key} 
                checked={selected.indexOf(option.key) >= 0} 
                on:click={(evt)=>showResult ? evt.preventDefault() : toggle(option.key)}
            >
            <span></span>
        </label>
        <br/>
    </div>
{/each}

<style>
    .should {
        color: var(--primary) !important;
    }
</style>