let state = "problem"; // problem | steps | done
let stepIndex = 0;
let currentData = null;

// Load the data to draw
async function loadData() {
  const res = await fetch("data/data.json");
  currentData = await res.json();

  state = "problem";
  stepIndex = 0;

  render();
}

function render() {
  if (!currentData) return;

  const problemEl = document.getElementById("problem");
  const stepsEl = document.getElementById("steps");

  if (state === "problem") {
    problemEl.innerHTML = `\\(${currentData.problem}\\)`;
    stepsEl.innerHTML = "";
  }

  if (state === "step") {
    problemEl.innerHTML = `\\(${currentData.problem}\\)`;

    let html = "";
    for (let i = 0; i <= stepIndex; i++) {
      const s = currentData.steps[i];
      html += `
        <div class="step">
          <div>\\(${s.before}\\)</div>
          <div>${s.step}</div>
          <div>\\(${s.after}\\)</div>
        </div>
        <hr/>
      `;
    }

    stepsEl.innerHTML = html;
  }

  MathJax.typesetPromise();
}

function startSequence() {
  // 1. show problem
  state = "problem";
  render();

  setTimeout(() => {
    state = "step";
    stepIndex = 0;
    render();

    let interval = setInterval(() => {
      stepIndex++;

      render();

      if (stepIndex >= currentData.steps.length - 1) {
        clearInterval(interval);

        setTimeout(() => {
          loadData(); // next problem
        }, 3000);
      }
    }, 2000); // time between steps

  }, 4000); // thinking time before reveal
}

loadData().then(() => {
  startSequence();
});