<script>
  import {onMount} from "svelte";
  import randomize from "../../rand.ts";

  export let question;
  export let showResult = false;

  export let isCorrect = false;

  let fields = [];

  onMount(()=>{
    fields = randomize(Object.keys(question.fields).map(e => ({
      key: e,
      value: question.fields[e]
    })));
  })

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

  let selected = {};
  // $: isCorrect = selected === question.correct;

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

  $: {
    isCorrect = fields.every(field=>selected[field.key] === question.correct[field.key]);
  }

</script>

{#each fields as field (field.key)}
  <div class="input-group">
    <label>{field.value}</label>
    <select class="inp" bind:value={selected[field.key]}>
      <option value={undefined}>-- select --</option>
      {#each values as value}
        <option value={value.key}>{value.value}</option>
      {/each}
    </select>
    {#if showResult}
      <div class="should">{question.values[question.correct[field.key]]}</div>
    {/if}
  </div>
{/each}

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

<!-- {#each options as option}
    <div
        key={option.key}
        class:should={showResult && option.key === question.correct }
    >
        <label class="input-checkbox" for={option.key}>{@html option.value.replace(/\n/g, "<br>")}
            <input
                type="radio"
                id={option.key} 
                checked={option.key===selected} 
                on:click={(evt)=>showResult ?
                evt.preventDefault() : selected = option.key}
            >
            <span></span>
        </label>
        <br/>
    </div>
{/each} -->
