let btns = Array.from(document.querySelectorAll('button'));
btns[0].addEventListener('click', createStudents);
btns[1].addEventListener('click', loadAllStudents);
let counter = 0;

async function createStudents() {
  let allInputs = Array.from(document.querySelectorAll('input'));
  let [fName, lName, facNum, grade] = allInputs;
  let username = `zhani`;
  let password = `zhani`;
  let url = `https://baas.kinvey.com/appdata/kid_BJD0TDR-H/`;
  if (fName.value && lName.value && facNum.value && grade.value) {
    // Niki id
    const res = await fetch(url + 'students', {
      method: 'GET',
      headers: { Authorization: 'Basic ' + btoa(`${username}:${password}`) }
    });

    const students = await res.json();
    const id =
      +sessionStorage.getItem('lastId') + 1 ||
      +students.sort((a, b) => a.idStudent - b.idStudent).pop().idStudent + 1 ||
      1;

    sessionStorage.setItem('lastId', id);
    // Niki id

    let finalGrade = Number(grade.value);
    finalGrade = finalGrade.toFixed(2);
    let obj = {
      idStudent: id,
      firstName: fName.value,
      lastName: lName.value,
      facultyNumber: facNum.value,
      grade: grade.value
    };
    fetch(url + 'students', {
      method: 'POST',
      headers: new Headers({
        Authorization: 'Basic ' + btoa(`${username}:${password}`),
        'Content-Type': 'application/json'
      }),
      body: JSON.stringify(obj)
    })
      .then((res) => res.json())
      .then((res) => console.log(`Added `, res));
    setTimeout(() => {
      document.querySelector('tbody').innerHTML = '';
      loadAllStudents();
    }, 1000);
  }
  fName.value = '';
  lName.value = '';
  facNum.value = '';
  grade.value = '';
}
function loadAllStudents() {
  document.querySelector('tbody').innerHTML = '';
  let url = `https://baas.kinvey.com/appdata/kid_BJD0TDR-H/`;
  let username = `zhani`;
  let password = `zhani`;
  fetch(url + 'students', {
    method: 'GET',
    headers: { Authorization: 'Basic ' + btoa(`${username}:${password}`) }
  })
    .then((res) => res.json())
    .then((data) => {
      let info = data.sort((a, b) => a.idStudent - b.idStudent);

      info.forEach((x) => {
        let tr = document.createElement('tr');
        let tdID = document.createElement('td');
        tdID.textContent = x.idStudent;
        let tdFirstName = document.createElement('td');
        tdFirstName.textContent = x.firstName;
        let tdLastName = document.createElement('td');
        tdLastName.textContent = x.lastName;
        let tdFacNum = document.createElement('td');
        tdFacNum.textContent = x.facultyNumber;
        let tdGrade = document.createElement('td');
        tdGrade.textContent = `${Number(x.grade).toFixed(2)}`;
        tr.appendChild(tdID);
        tr.appendChild(tdFirstName);
        tr.appendChild(tdLastName);
        tr.appendChild(tdFacNum);
        tr.appendChild(tdGrade);
        document.querySelector('tbody').appendChild(tr);
      });
    });
}