---
const { answer, ballast, explanation } = Astro.props;
---

<style>
  input {
    vertical-align: middle;
  }
  .option {
    position: relative;
  }
  #answer-check {
    color: white;
    position: absolute;
    transform: scale(-1, 1);
    rotate: 95deg;
    left: 6px;
    top: 3px;
    display: none;
  }
</style>

<fieldset style={{ border: "none" }}>
  {
    [
      <div class="option">
          <i id="answer-check">‹</i>
          <input type="radio" id="answer" name={answer} />
          <label for="answer">{answer}</label>
      </div>,
      ...ballast.map((b: string) => (
        <div class="option">

            <input type="radio" id={b} name={b} />
            <label for={b}>{b}</label>
        </div>
      )),
    ].sort(() => Math.random() - 0.5)
  }
</fieldset>
<span id="explanation" style="display: none;">😸 {explanation}</span>
<button id="repeat" style="display: none;">😿 Ещё разок!</button>

<script>
  document.querySelectorAll("input").forEach((el) => {
    el.addEventListener("change", () => {
      document.querySelector("fieldset")!.disabled = true;
      document.getElementById("repeat")!.style.display = "block";
    });
  });

  document.querySelector("#answer")?.addEventListener("change", () => {
    document.getElementById("explanation")!.style.display = "block";
    document.getElementById("repeat")!.style.display = "none";
    document.getElementById("answer-check")!.style.display = "inline"
  });

  document.querySelector("#repeat")!.addEventListener("click", () => {
    document.querySelectorAll("input").forEach((el) => {
      el.checked = false;
    });
    document.querySelector("fieldset")!.disabled = false;
    document.getElementById("repeat")!.style.display = "none";
  });
</script>