var listCategories = [];
var listTags = [];

function getListTags(element) {
  let arrayTags = [];
  let listLi = element.getElementsByTagName("li");
  for (let i = 0; i < listLi.length; i++) {
    arrayTags.push(listLi[i].textContent.toLowerCase());
  }
  return arrayTags;
}

function recherche() {
  let listElem = document.getElementsByClassName("elem");

  if (!listCategories.length && !listTags.length) {
    for (let element of listElem) {
      element.classList.remove("hide");
    }
  } else if (listCategories.length && listTags.length) {
    for (let element of listElem) {
      let arrayTags = getListTags(element);
      if (listTags.some(r => arrayTags.includes(r)) &&
        listCategories.some(r => element.classList.contains(r))) {
        element.classList.remove("hide");
      } else {
        element.classList.add("hide");
      }
    }
  } else if (listCategories.length) {
    for (let element of listElem) {
      if (listCategories.some(r => element.classList.contains(r))) {
        element.classList.remove("hide");
      } else {
        element.classList.add("hide");
      }
    }
  } else if (listTags.length) {
    for (let element of listElem) {
      let arrayTags = getListTags(element);
      if (listTags.some(r => arrayTags.includes(r))) {
        element.classList.remove("hide");
      } else {
        element.classList.add("hide");
      }
    }   
  }
}

function addCat() {
  let categorie = document.getElementById("categorie").value;
  if (!listCategories.includes(categorie)) {
    listCategories.push(categorie);
    let divListCat = document.getElementById("listCategorie");
    let newElem = document.createElement('p');
    newElem.innerHTML = categorie;
    newElem.id = categorie;
    newElem.onclick = function() {removeCat(this)};
    divListCat.appendChild(newElem);

    recherche();
  }
}

function removeCat(elem) {
  let categorie = elem.id;
  if (listCategories.includes(categorie)) {
    let idCat = listCategories.indexOf(categorie);
    listCategories.splice(idCat, 1);

    let divListCat = document.getElementById("listCategorie");
    divListCat.removeChild(elem);

    recherche();
  }
}

function addTag() {
  let tag = document.getElementById("tag").value;
  if (!listTags.includes(tag.toLowerCase())) {
    listTags.push(tag.toLowerCase());
    let divListTag = document.getElementById("listTags");
    let newElem = document.createElement('p');
    newElem.innerHTML = tag;
    newElem.id = tag;
    newElem.onclick = function() {removeTag(this)};
    divListTag.appendChild(newElem);

    recherche();
  }
}

function removeTag(elem) {
  let tag = elem.id;
  if (listTags.includes(tag)) {
    let idTag = listTags.indexOf(tag);
    listTags.splice(idTag, 1);

    let divListTag = document.getElementById("listTags");
    divListTag.removeChild(elem);

    recherche();
  }
}