var myButton = document.getElementById('button');
var clearButton = document.getElementById('clear');
var cookies = document.querySelector('cookies');
var pw = document.querySelector('pw');
var inp = document.getElementById('myInput');
var inpw = document.getElementById('myPW');

var inputData = [];
var inputPW = [];

let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
let itemsArray2 = localStorage.getItem('items2') ? JSON.parse(localStorage.getItem('items2')) : [];

localStorage.setItem('items', JSON.stringify(itemsArray));
data = JSON.parse(localStorage.getItem('items'));

localStorage.setItem('items2', JSON.stringify(itemsArray2));
data2 = JSON.parse(localStorage.getItem('items2'));

liMaker = (text) => {
    li = document.createElement('li');
    li.textContent = text;
    cookies.appendChild(li);

    inputData.push(text);
}

liMaker2 = (text2) => {
    li2 = document.createElement('li');
    li2.textContent = text2;
    pw.appendChild(li2);

    inputPW.push(text2);
}

myButton.addEventListener('click', function(event) {
    event.preventDefault();

  itemsArray.push(inp.value);
  localStorage.setItem('items', JSON.stringify(itemsArray));
  liMaker(inp.value);
  inp.value = "";

  itemsArray2.push(inpw.value);
  localStorage.setItem('items2', JSON.stringify(itemsArray2));
  liMaker2(inpw.value);
  inpw.value = "";

  handleData();
});

data.forEach(myInput => {
  liMaker(myInput);
});

data2.forEach(myPW => {
  liMaker2(myPW);
});

function handleData() {
    alert(itemsArray[0]);
    alert(inputData[0]);
}

clearButton.addEventListener('click', function () {
  localStorage.clear();
  while (cookies.firstChild && pw.firstChild) {
    cookies.removeChild(cookies.firstChild);
    pw.removeChild(pw.firstChild);
  }
  itemsArray = [];
  itemsArray2 = [];
});

//------------------------------------------

function autocomplete(inp, arr) {
  var currentFocus;
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      this.parentNode.appendChild(a);
      for (i = 0; i < arr.length; i++) {
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          b = document.createElement("DIV");
          b.innerHTML = arr[i].substr(0, val.length);
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              myPW.value = pass[inp.value];
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) {
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}

//DATA OF inputData[i]: inputPW[i]; i++ NEED TO BE PASSED TO THIS STORAGE
//i IS INCREMENTING AS PER HOW MANY THE USER'S INPUT
var pass = {
    //ARRAY HERE OF inputData[i]: inputPW[i]
};

autocomplete(document.getElementById("myInput"), itemsArray); //it can also be inputData

document.getElementById("button").addEventListener("click", clickFunction);