const HTTP_BASE = "http://127.0.0.1:3000";
const tokens = {};

function httpGetAsync(token: string, theUrl, callback = null) {
  if (!!token && tokens[token]) {
    clearTimeout(tokens[token]);
    delete tokens[token];
  }
  const t = setTimeout(() => {
    const xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = () => {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        if (!!callback) {
          callback(xmlHttp.responseText);
        }
      }
    };
    xmlHttp.open("GET", theUrl, true);  // true for asynchronous
    xmlHttp.send(null);
    delete tokens[token];
  }, 500);
  if (!!token) {
    tokens[token] = t;
  }
}

function addProgressBarFunctionality(id: string) {
  const rangediv = document.getElementById(id);
  rangediv.getElementsByClassName("mdl-progress")[0].addEventListener("mdl-componentupgraded", () => {
    let value = parseInt(rangediv.dataset.value, 10);
    setProgress(rangediv, value);
    rangediv.getElementsByClassName("mdl-list__item-secondary-info")[0].innerHTML = `${value}/7`;
    rangediv.getElementsByClassName("minus-arrow")[0].addEventListener("click", () => {
      value = Math.max(1, parseInt(rangediv.dataset.value, 10) - 1);
      setProgress(rangediv, value);
      if (!!rangediv.dataset.dosend) {
        sendCocktail(id, value);
      }
    });
    rangediv.getElementsByClassName("plus-arrow")[0].addEventListener("click", () => {
      value = Math.min(7, parseInt(rangediv.dataset.value, 10) + 1);
      setProgress(rangediv, value);
      if (!!rangediv.dataset.dosend) {
        sendCocktail(id, value);
      }
    });
  });
}

function setProgress(rdiv, v) {
  rdiv.dataset.value = v.toString();
  rdiv.getElementsByClassName("mdl-progress")[0].MaterialProgress.setProgress(100 * (v - 1 ) / 6);
  rdiv.getElementsByClassName("mdl-list__item-secondary-info")[0].innerHTML = `${v}/7`;
}

function sendAge(elem) {
  httpGetAsync("agetoken", `${HTTP_BASE}/update/personal?age=${encodeURI(elem.value)}`);
}

function sendSex(elem) {
  httpGetAsync("sextoken", `${HTTP_BASE}/update/personal?sex=${encodeURI(elem.value)}`);
}

function sendNewCocktail() {
  const cocktail = document.getElementById("cocktails").value;
  if (cocktail === "") {
    return;
  }
  const level = document.getElementById("pnew").dataset.value;
  httpGetAsync(null, `${HTTP_BASE}/update/newcocktail?cocktail=${encodeURI(cocktail)}&level=${encodeURI(level)}`);
  const elem = document.getElementById(cocktail);
  if (!!elem) {
    setProgress(elem, level);
  } else {
    const list = document.getElementById("cocktaillist");
    let NAME = cocktail;
    let LEVEL = level;
    list.innerHTML += (`<li class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><i class="material-icons mdl-list__item-avatar">local_bar</i><span>${NAME}</span><span class="mdl-list__item-sub-title"> </span></span><span class="mdl-list__item-secondary-content">
    <div id="${NAME}" class="mdl-grid" style="width:100px;text-align:center;padding:0;margin:0" data-value=""+LEVEL+"">
      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px"><a class="minus-arrow mdl-list__item-secondary-action" href="#"><i class="material-icons">remove</i></a></div>
      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px">
        <div class="mdl-progress mdl-js-progress" style="text-align:center"><span class="mdl-list__item-secondary-info"></span></div>
      </div>
      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px"><a class="plus-arrow mdl-list__item-secondary-action" href="#"><i class="material-icons">add</i></a></div>
    </div></span></li>`);
    addProgressBarFunctionality(NAME);
  }
}

function sendCocktail(id, value) {
  const cocktail = id;
  const level = value;
  httpGetAsync("updatetoken" + id, `${HTTP_BASE}/update/newcocktail?cocktail=${encodeURI(cocktail)}&level=${encodeURI(level)}`);
}