var elementList = document.querySelector('#app ul');

var inputElement = document.querySelector('#app input');

var buttonElement = document.querySelector('#app button');

var todos = [
  'Estudar JS',
  'Ler you dont know js',
  'Participar da comunidade rocketseat'
]

const removeElement = index => todos.splice(index, 1);

const clearElementList = () => elementList.innerHTML = '';

const render = elements => el => {
  var li = document.createElement('li');
  var textLi = document.createTextNode(el);

  li.appendChild(textLi);

  var linkElement = document.createElement('a');
  var textLink = document.createTextNode('[x]');

  linkElement.setAttribute('href', '#');

  linkElement.appendChild(textLink);
  linkElement.onclick = () => {
    var index = todos.indexOf(el);
    console.log(el);
    removeElement(index);
    clearElementList();
    renderElements(todos);
  }

  li.appendChild(linkElement);

  elements.appendChild(li);
}

const renderElement = render(elementList);

const renderElements = elements => {
  const render = _ => {
    renderElement(_);
  }

  elements.forEach(render);
}

renderElements(todos);

const clearInput = input => input.value = '';

const addTodo = input => {
  return function () {
    var value = input.value;
    if(!value) return;

    todos.push(value);
    clearElementList();

    renderElements(todos);
    clearInput(input);
  }
}

buttonElement.onclick = addTodo(inputElement);