window.onload = function () {
  // auto-submit by click file input
  document.getElementById('upload_files').onchange = (e) => {
    upload_files(e.target);
  };
};

function upload_files(files_upload) {
  let form_data = new FormData();
  let upload_button = document.getElementById('upload_button');

  update_upload_status(`Загружается ${files_upload.files.length} файл(а, ов)`);
  for (var i = 0; i < files_upload.files.length; i++) {
    form_data.append('files', files_upload.files[i]);
  }
  upload_button.classList.add('d-none');
  files_upload.value = null;

  let request = new XMLHttpRequest();
  request.open('POST', '/upload');

  request.upload.addEventListener('progress', function (e) {
    let percent_completed = (e.loaded / e.total) * 100;
    change_upload_state(Math.floor(percent_completed));
  });

  request.addEventListener('load', function (e) {
    update_upload_status();
    upload_button.classList.remove('d-none');
  });

  request.send(form_data);
}

function change_upload_state(percent_completed) {
  let upload_state = document.getElementById('upload_state');
  upload_state.classList.remove('d-none');

  if (percent_completed == 100) {
    upload_state.childNodes[1].style.width = '0%';
    upload_state.setAttribute('aria-valuenow', 0);
    upload_state.classList.add('d-none');

    update_upload_status('Сохранение файлов...');

    return;
  } else {
    upload_state.childNodes[1].style.width = `${percent_completed}%`;
    upload_state.setAttribute('aria-valuenow', percent_completed);
  }
}

function update_upload_status(message = '') {
  let upload_status = document.getElementById('upload_status');

  upload_status.innerText = message;
}