let rangeValues = {};
let xhrUpd = new XMLHttpRequest();

xhrUpd.onreadystatechange = function () {
  if (xhrUpd.readyState == 4) {
    if (xhrUpd.status == 200) {
      console.log(xhrUpd.responseText);
    }
    else {
      console.log("status:", xhrUpd.status);
    }
  }
}

function reloadRangeValues() {
  let url = "/update";
  // if there are scheduled updates, send them
  if (Object.keys(rangeValues).length > 0) {
    let params = [];
    for (let p in rangeValues)
      params.push(encodeURIComponent(p) + "=" + encodeURIComponent(rangeValues[p]));
    params = params.join("&");

    xhrUpd.open("POST", url, true);
    xhrUpd.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhrUpd.send(params);

    rangeValues = {};
  }

};

// connect actions to range inputs
function rangeToOutput(range, output) {
  document.getElementById(range).oninput = function () {
    document.getElementById(output).innerHTML = this.value;
    // add to pending range changes
    rangeValues[this.id] = this.value;
  }
}

rangeToOutput("range_act_pwm", "out_act_pwm");
rangeToOutput("range_idl_pwm", "out_idl_pwm");
rangeToOutput("range_tim_sta", "out_tim_sta");
rangeToOutput("range_tim_ldr", "out_tim_ldr");
rangeToOutput("range_ldr_shw", "out_ldr_shw");

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      console.log(xhr.responseText);
      terminal = document.getElementById("term");
      autoscroll = document.getElementById("scroll");
      terminal.innerHTML += xhr.responseText;
      if (autoscroll.checked)
        terminal.scrollTop = terminal.scrollHeight;
    }
    else {
      console.log("status:", xhr.status);
    }
  }
}
function reloadTerminal() {
  xhr.open("POST", "/terminal", true);
  xhr.send();
};

document.addEventListener('DOMContentLoaded', () => {
  setInterval(reloadTerminal, 1000);
  setInterval(reloadRangeValues, 1000);
});

// use data- attributes for action
document.querySelectorAll('.control').forEach((button) => {
  button.onclick = () => {
    fetch(`/action`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `control=${button.dataset.action}`
    })
      .then(response => console.log(response))
      .catch(error => console.log('Error:', error));
  }
});


document.querySelector('#clear_term').onclick = () => {
  document.querySelector("#term").innerHTML = '';
};