var oven_status = "";
var _run = 0;
var _elapsedTime = 0;

setInterval(function () {
  const url = '/status';
  fetch(url)
  .then((respone)=>{
    return respone.json();
  })
    .then((data)=>{
      document.getElementById("tempinfo").value = data.temp || -1;
      document.getElementById("targetinfo").value = data.target || -1;
      document.getElementById("powerinfo").value = data.power || -1;
      _run = data.runProfile || 0;
      _elapsedTime = data.elapsedTime || 0;
      M.updateTextFields();
    })

  if(_run == 1){
    myChart.data.datasets[1].data.push({
      x:_elapsedTime / 1000,
      y:document.getElementById("tempinfo").value
    });
    myChart.update();
  }
}, 40000);

async function fetchData(url) {
  let raw = await fetch(url);
  let data = await raw.json();
  return data;
}

async function listProfiles() {
  let list = document.getElementById('profilesList');
  list.innerHTML = '';
  let raw = await fetch("/profile/list");
  let profiles = await raw.json();
  profiles.forEach((profile, idx)=>{
  const node = document.createElement('li');
  node.classList.add("collection-item");
  node.innerHTML = '<div>'+profile+'<a href="#!" class="secondary-content" onclick="getProfile(\'' + profile + '\')"><i class="material-icons">cloud_download</i></a></div>';
  list.appendChild(node);
  });
}

async function getProfile(name) {
  let raw = await fetch('/profile/?name='+name);  
  let profile = await raw.json();
  myChart.data.datasets[0].data = profile.values;
  document.getElementById("profileName").value = profile.name;
  myChart.update();  
}

function saveProfile() {
  const data = new URLSearchParams();
  data.append('name',document.getElementById('profileName').value);
  data.append('values',myChart.data.datasets[0].data);
  fetch('/profile/save', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: data
  })
  listProfiles();
}
function deleteProfile() {
  const data = new URLSearchParams();
  data.append('name',document.getElementById('profileName').value);
  fetch('/profile/delete', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: data
  })
  listProfiles();
}

function setXmax() {
  myChart.data.datasets[0].data[9].x = document.getElementById('xmax').value;
  myChart.update();
}
function setTarget() {
  const data = new URLSearchParams();
  data.append('value',document.getElementById('target').value);  
  fetch('/target', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: data
  })
}

async function getPID() {
  let raw = await fetch('/pid');
  let data = await raw.json();

  document.getElementById('kp').value = data.kp || -1;
  document.getElementById('ki').value = data.ki || -1;
  document.getElementById('kd').value = data.kd || -1;

  M.updateTextFields();
}

function setPID() {
  const data = new URLSearchParams();
  data.append('kp', document.getElementById('kp').value);
  data.append('ki', document.getElementById('ki').value);
  data.append('kd', document.getElementById('kd').value);  
  fetch('/pid', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: data
  })
}
function runProfile() {
  var btn = document.getElementById("btnRunProfile");
  const data = new URLSearchParams();
  if(_run == 1){
    //stop profile
    _run = 0;
    btn.classList.remove("red");
    btn.classList.add("teal");
    btn.innerHTML = "Run";
    data.append('run', _run);
  }else{
    //run profile
    _run = 1;
    data.append('run', _run);
    data.append('profile', JSON.stringify(myChart.data.datasets[0].data));
    btn.classList.remove("teal");
    btn.classList.add("red");
    btn.innerHTML = "Stop";
    _elapsedTime = 0;
    myChart.data.datasets[1].data.length = 0;
    myChart.update();
  }

  fetch('/profile', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: data
  })

}

function joinNetwork() {
  
  const data = new URLSearchParams();
  
  data.append('ssid', document.getElementById("ssid").value);
  data.append('pass', document.getElementById("pass").value);
  data.append('gateway', document.getElementById("gateway").value);
  data.append('ip', document.getElementById("ip").value);

  fetch('/setWiFi', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: data
  })
}

async function scanNetworks() {
  let raw = await fetch("/scanNetworks");
  let data = await raw.json();
  var listHTML = "";
  data.forEach((network)=>{
    listHTML += '<tr><td>'+network.ssid+'</td><td>'+network.channel+'</td><td>'+network.rssi+'</td></tr>';
  });
  document.getElementById("networks").innerHTML = listHTML;
}

var ctx = document.getElementById("myChart");
Chart.defaults.global.defaultFontColor = 'red';
var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
      datasets: [{
          label: 'Temperature profile',
          data: [{
                x: 0,  y: 25
            }, {
                x: 90,  y: 150
            }, {
                x: 270,  y: 200
            }, {
                x: 300,  y: 235
            }, {
                x: 330,  y: 250
            }, {
                x: 360,  y: 217
            }, {
                x: 420,  y: 25
            }, {
                x: 480,  y: 25
            }, {
                x: 540,  y: 25
            }, {
                x: 600,  y: 25
            }],
            lineTension: 0,
            showLine: true
      },{
        label: 'History',
        data: [{
          x:0, y:0
        }],
        lineTension: 0,
        showLine: true,
        pointBackgroundColor: 'red'
      }]
  },
  options: {
      layout: {
        padding: {
          bottom: 20
        }
      },
      responsive: true,
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero:true,
                  min: 0,
                  max: 280
              }
          }]
      },
      dragData: true,
      dragX: true,
      onDragStart: function (event, element) {},
      onDrag: function (event, datasetIndex, index, value) {},
      onDragEnd: function (event, datasetIndex, index, value) {}
  }
});


var ttOptions = {
enterDelay: 500,
inDuration: 300
};

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.tooltipped');
  var instances = M.Tooltip.init(elems, ttOptions);
  getPID();
  M.AutoInit();
});