var availabilityElem = document.querySelector('#availability');
var errorsElem = document.querySelector('#errors');
var resultElem = document.querySelector('#result');
availabilityElem.textContent = '';
errorsElem.textContent = '';

document.querySelector('#shorten-btn').addEventListener('click', function() {
  let url = document.querySelector('#url-input').value.trim();
  document.querySelector('#url-input').value = url;
  let short = document.querySelector('#short-input').value;
  if (!url) {
    errorsElem.textContent = 'No URL provided!';
    return;
  }
  if (!is_url(url)) {
    errorsElem.textContent = 'Not a valid URL!';
    return;
  }
  let xhr = new XMLHttpRequest();
  let params = new URLSearchParams();
  params.set('url', url);
  if (short) params.set('short', short);
  xhr.open('GET', 'api/create?' + params.toString());
  xhr.onload = function() {
    if (xhr.status < 500) {
      let info = JSON.parse(xhr.responseText);
      if (info['status'] === 'success') {
        resultElem.style.color = '#90EE90';
        let goturl = info['content']['url'];
        resultElem.innerHTML = 'Created! ' + goturl + '';
        errorsElem.textContent = '';
        availabilityElem.textContent = 'Unavailable';
      } else {
        resultElem.style.color = '#f00';
        resultElem.textContent = info['content'];
      }
    } else alert('Error in API!');
  };
  xhr.send();
});

// One AJAX request is allowed to be made in one second
// All other requests are ignored
document
  .querySelector('#short-input')
  .addEventListener('input', e =>
    throttleRequest(fetchData.bind(this, e), 1000)
  );

// Rename this function to suit your style/convention
function fetchData(e) {
  let short = e.target.value;
  if (!short) {
    availabilityElem.textContent = '';
    return;
  }

  let xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/exists/' + encodeURIComponent(short));
  xhr.onload = function() {
    if (xhr.status < 500) {
      let info = JSON.parse(xhr.responseText);
      if (info['status'] === 'success') {
        let ab = info['content']['exists'];
        availabilityElem.textContent = ab ? 'Unavailable!' : 'Available!';
        availabilityElem.style.color = ab ? '#f00' : '#90EE90';
      } else {
        resultElem.style.color = '#f00';
        resultElem.textContent = info['content'];
      }
    } else alert('Error in API!');
  };
  xhr.send();
}

function throttleRequest(requestFunction, interval) {
  // This variable initializes only once because of closure
  var lastCallTime = 0;

  // This function is executed every time input event is triggered
  return function() {
    var now = Date.now();

    // Compare last call time + interval with the current time to see if call can be made
    if (lastCallTime + interval < now) {
      // Set current time to be lastCallTime
      lastCallTime = now;
      // Call callback function(requestFunction) and pass any argument it may recieve
      return requestFunction.apply(this, arguments);
    }
  };
}

function is_url(str) {
  regexp = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
  if (regexp.test(str)) return true;
  return false;
}