document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("translateicon").addEventListener("click", translate)
}, false);

function translate() {
    var requestedText = document.getElementById("requested_text").value

    var data = {
        "requested_text": requestedText,
        "language_from": document.getElementById("requested_text_language").value,
        "language_to": document.getElementById("received_text_language").value
      }


      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
             document.getElementById("received_text").value = JSON.parse(xhttp.responseText).response_text
          }
      };
      xhttp.open("POST", "/api/translate", true);
      xhttp.setRequestHeader("Content-Type", "application/json");
      xhttp.send(JSON.stringify(data)); 
}

function fillDropDowns() {
    var dropdown1 = document.getElementById("requested_text_language");
    var dropdown2 = document.getElementById("received_text_language");

    for (var i = 0; i < languages.length; i++) {
        var option = document.createElement("option");
        option.text = languages[i].language;
        option.value = languages[i].code;
        dropdown1.add(option);

        var option = document.createElement("option");
        option.text = languages[i].language;
        option.value = languages[i].code;
        dropdown2.add(option);

        if(languages[i].code == "de") {
            dropdown1.value = "de"
        }

        if(languages[i].code == "en") {
            dropdown2.value = "en"
        }
    }
}