<script lang="ts">
  export let props;
  export let question = {
    
    description: `
      what is 1 + 1?
    `,
    concepts: [ "addition" ],
    choices: [
      { text: "1", correct: false },
      { text: "2", correct: true },
      { text: "3", correct: false },
    ],
  };

  // State related variables
  let state = "ask";
  let currentChoice: number = -1;
  let wasCorrect = false;

  let choose = (index: number) => {
    currentChoice = index;
  };

  let answer = async (sure: boolean) => {
    state = "submitting";
    let resp = await fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify({
      }),
    });
    state = "answer";
    wasCorrect = question.choices[currentChoice].correct;
  };

  let clearChoice = () => {
    currentChoice = -1;
  };

  let goBack = () => {
    state = "ask";
    currentChoice = -1;
  };
</script>

<div class="quiz-box">
  {#if state == "ask" }
    <small>Q:</small>
  {:else}
    <small>A:</small>
  {/if}

  <p>{ question.description }</p>
  <ul class="choices">
    {#each props.choices as choice, index }
      <li>
        <input type="radio"
               name="choice"
               class="box"
               id={"choice" + index}
               checked={currentChoice == index}
               disabled={state != "ask"}
               on:change={() => choose(index)} />
        <label for={"choice" + index}>{ choice.text }</label>
      </li>
    {/each}
  </ul>

  {#if state == "ask" }
    <div class="answer-buttons">
      {#if currentChoice < 0}
        <button>Skip</button>
      {:else}
        <button on:click={() => clearChoice()}>Clear</button>
      {/if}
      <button on:click={() => answer(false)} disabled={currentChoice < 0}>Not sure</button>
      <button on:click={() => answer(true)} disabled={currentChoice < 0}>I'm sure</button>
    </div>
  {:else}
    {#if wasCorrect }
      <p>you Got it!</p>
    {:else}
      <p>you Failed</p>
    {/if}
    <div> <button on:click={() => goBack()}>Go back</button> </div>
  {/if}
</div>

<style lang="scss" scoped>
  .quiz-box {
    border: 1px solid gray;
    border-radius: 8px;
    padding: 8px;

    .choices {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-left: 0;

      li {
        list-style: none;
        flex-grow: 1;
        margin: 12px;
        width: 100%;

        input.box {
          display: none;
        }

        label {
          border-radius: 8px;
          cursor: pointer;
          display: block;
          width: 100%;
          padding: 6px;
          box-sizing: border-box;
          text-align: center;
        }

        input.box:not(:checked) + label {
          border: 2px solid #ccc;
        }

        input.box:checked + label {
          border: 2px solid red;
          background-color: lighten(red, 45%);
          font-weight: bold;
        }
      }
    }

    .answer-buttons {
      display: flex;
      justify-content: flex-end;

      button {
        margin: 6px;
      }
    }
  }
</style>
