let d = document;
let removeModel = (id, url) => {
  let formData = new FormData();
  formData.append("id", id || 0);
  let xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.send(formData);
  xhr.onload = () => location.reload();
};
let deleteEvent = (v, message, url) => {
  v.addEventListener("click", e => {
    if (confirm(message))
      removeModel(e.target.dataset.id, url)
  });
};

d.querySelectorAll(".js-group-btn-delete").forEach(v => {
  deleteEvent(v, "You're sure to delete this group?", "/groups/delete")
});

d.querySelectorAll(".js-server-btn-delete").forEach(v => {
  deleteEvent(v, "You're sure to delete this server?", "/servers/delete")
});

let serverFormOnSubmit;
serverFormOnSubmit = d.querySelector(".js-server-form-on-submit");
if (serverFormOnSubmit) {
  serverFormOnSubmit.addEventListener("submit", e => {
    let check_ip = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    let ip = e.target.ip;
    if (!check_ip.exec(ip.value)) {
      e.preventDefault();
      ip.focus()
    }
  });
}

d.querySelectorAll(".js-servers-tree-group").forEach(v => {
  v.addEventListener("click", e => {
    let parent = e.target.parentElement.querySelector(".js-servers-tree-group-list");
    if (parent) {
      parent.classList.toggle("servers-tree-group__list--active");
    }
    e.target.classList.toggle("servers-tree-group--down");

  })
});

d.querySelectorAll(".js-modal-close").forEach(v => {
  v.addEventListener("click", () => {
    d.querySelector(".modal").classList.remove("modal--active")
  })
});

d.querySelectorAll(".js-ping").forEach(v => {
  v.addEventListener("click", e => {
    d.querySelector(".modal").classList.add("modal--active");
    let mwClass = d.querySelector(".modal-window").classList;
    mwClass.add("modal-window--spiner");

    let xhr = new XMLHttpRequest();
    xhr.open("POST", "/ping/" + e.target.dataset.id);
    xhr.send();
    xhr.onload = () => {
      let resp = JSON.parse(xhr.response);

      if (resp.status === 'ok') {
        ['name', 'ip', 'lost', 'transmitted', 'received'].map(i => {
          d.querySelector('.js-ping-result-' + i).innerHTML = resp[i]
        })
      }
      mwClass.remove("modal-window--spiner");

    };
  })
});