//keys of users

let keys = ["id", "name", "email"];

// GET data from the server

function getServerData(url) {
  let fetchOptions = {
    method: "GET",
    mode: "cors",
    cache: "no-cache"
  };

  // console loging 
/*   fetch(url, fetchOptions).then(
    response => response.json(),
    err => console.error(err)
  ).then(
    data => console.log(data)
  ); */

  //átadás

  return fetch(url, fetchOptions).then(
    response => response.json(),
    err => console.error(err)
  );
}



function startGetUsers() {
  getServerData("http://localhost:3000/users").then(
    data => fillDataTable(data, "userTable")
  );
}



document.querySelector("#getDataBtn").addEventListener("click", startGetUsers);

// fill table with server data

function fillDataTable(data, tableID) {
  let table = document.querySelector(`#${tableID}`);
  if (!table) {
    console.error(`Table "${tableID}" is not found.`)
    return;
  };

  let tBody = table.querySelector("tbody");
  tBody.innerHTML = "";

  // add new user row to the table
  let newRow = newUserRow();
  tBody.appendChild(newRow);
  
  for (let row of data) {
    let tr = createAnyElement("tr");
    for (let k of keys) {
      let td = createAnyElement("td");
      let input = createAnyElement("input", {
        class: "form-control",
        value: row[k],
        name: k
      });
      // itt még nem módosítható:::: td.innerHTML = row[k];
      // ez már az:
      if (k == "id") {
          input.setAttribute("readonly", true)
      }
      td.appendChild(input);
      tr.appendChild(td);
    };
    let btnGroup = createBtnGroup();
    tr.appendChild(btnGroup);
    tBody.appendChild(tr);
  }
}

function createAnyElement(name, attributes) {
  let element = document.createElement(name);
  for (let k in attributes) {
    element.setAttribute(k, attributes[k]);
  }
  return element;
}

function createBtnGroup() {
  let group = createAnyElement("div", {class: "btn btn-group"});
  let infoBtn = createAnyElement("button", {class: "btn btn-info", onclick: "setRow(this)"});
  infoBtn.innerHTML = '<i class="fas fa-sync" aria-hidden="true"></i>';
  let delBtn = createAnyElement("button", {class: "btn btn-danger", onclick: "delRow(this)"});
  delBtn.innerHTML = '<i class="fas fa-trash-alt" aria-hidden="true"></i>';
  group.appendChild(infoBtn);
  group.appendChild(delBtn);

  let td = createAnyElement("td");
  td.appendChild(group);

  return td;
}


// DELETE user

function delRow(btn){
  let tr = btn.parentElement.parentElement.parentElement;
  let id = tr.querySelector("td:first-child").innerHTML;
  let fetchOptions = {
    method: "DELETE",
    mode: "cors",
    cache: "no-cache"
  };

  fetch(`http://localhost:3000/users/${id}`, fetchOptions).then(
    resp => resp.json(),
    err => console.error(err)
  ).then(
    data => {
      startGetUsers();
    }
  );
}

// create new user row to the table

function newUserRow(row) {
  let tr = createAnyElement("tr");
  for (let k of keys) {
    let td = createAnyElement("td");
    let input = createAnyElement("input", {
      class: "form-control",
      name: k
    });
    td.appendChild(input);
    tr.appendChild(td);
  }

  let newBtn = createAnyElement("button", {
    class: "btn btn-success",
    onclick: "createUser(this)"
  });
  newBtn.innerHTML = '<i class="fas fa-sync" aria-hidden="true"></i>';
  let td = createAnyElement("td");
  td.appendChild(newBtn);
  tr.appendChild(td);

  return tr;
}

// CREATE new user

function createUser(btn) {
  let tr = btn.parentElement.parentElement;
  let data = getRowData(tr);
  delete data.id;
  let fetchOptions = {
    method: "POST",
    mode: "cors",
    cache: "no-cache",
    headers: {
      'Content-Type': 'application/json'
    },
    credentials: 'same-origin',
    body: JSON.stringify(data)
  };

  fetch(`http://localhost:3000/users`, fetchOptions).then(
    resp =>resp.json(),
    err => console.error(err)
  ).then(
    data => startGetUsers()
  )
}

// get data from a table row

function getRowData(tr){
  let inputs = tr.querySelectorAll("input.form-control");
  let data = {};
  for (let i = 0; i < inputs.length; i++) {
    data[inputs[i].name] = inputs[i].value;
  }
  return data;
}

// UPDATE user

function setRow(btn){
  let tr = btn.parentElement.parentElement.parentElement;
  let data = getRowData(tr);
  let fetchOptions = {
    method: "PUT",
    mode: "cors",
    cache: "no-cache",
    headers: {
      'Content-Type': 'application/json'
    },
    credentials: 'same-origin',
    body: JSON.stringify(data)
  };

  fetch(`http://localhost:3000/users/${data.id}`, fetchOptions).then(
    resp => resp.json(),
    err => console.error(err)
  ).then(
    data => startGetUsers()
  );

}