window.SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.lang = "da-DK ";
recognition.interimResults = true;

const langStrings = {
  "da-DK": {
    say: "Sig",
    trigger: "skift farve",
    explain: "for at skifte farve"
  },
  "es-MX": {
    say: "Di",
    trigger: "cambia el color",
    explain: "para cambiar el color de fondo"
  },
  "en-US": {
    say: "Say",
    trigger: "change background",
    explain: "to change the background color"
  }
};

const controls = document.querySelector(".controls");
const say = controls.querySelector(".say");
const trigger = controls.querySelector(".trigger");
const explain = controls.querySelector(".explain");
controls.addEventListener("change", e => {
  if (!e.target.matches("input") || !e.target.checked) {
    // Not what we are listening for, so return.
    return;
  }
  // Set the language.
  recognition.lang = e.target.value;
  // Update the controls text.
  say.textContent = langStrings[e.target.value].say;
  trigger.textContent = langStrings[e.target.value].trigger;
  explain.textContent = langStrings[e.target.value].explain;
});

let p = document.createElement("p");
const words = document.querySelector(".words");
words.append(p);

function changeColor() {
  document.documentElement.style.setProperty(
    "--bg",
    `hsl(${360 * Math.random()}, ${100 * Math.random()}%, ${90 *
    Math.random()}%)`
  );
}

recognition.addEventListener("result", e => {
  const transcript = Array.from(e.results)
  .map(result => result[0])
  .map(result => result.transcript)
  .join("");
  p.textContent = transcript;
  if (e.results[0].isFinal) {
    p = document.createElement("p");
    words.appendChild(p);

    if (transcript.includes(trigger.textContent)) {
      changeColor();
    }
  }
});

recognition.addEventListener("end", e => {
  recognition.start();
});
recognition.start();