const input = document.querySelector('.interface-input');
const bottom = document.querySelector('.interface-bottom');
const list = document.querySelector('.interface-list');
const remaining = document.querySelector('.interface-remaining');
const limit = 10;

const totalTags = () => list.querySelectorAll('.interface-tag').length;

function overLimit() {
  input.value = '';   
  input.placeholder = totalTags() >= limit
    ? `You've reached the limit of 10 tags`
    : `Press enter or add a comma after each tag`;
}

function closeTag(e) {
  e.target.parentElement.remove();
  remaining.textContent = `${limit - totalTags()} tags remaining`
  totalTags() === 0 && clearTags();
  overLimit();
}

function clearTags() {
  list.innerHTML = ''; 
  input.value = '';
  remaining.textContent = '10 tags remaining';
  setTimeout(() => bottom.classList.remove('active'),500);
}

function showTags() {
  if (!input.value.length) return;
  bottom.classList.add('active');
  list.innerHTML += createMarkup();
  input.value = '';
  remaining.textContent = `${limit - totalTags()} tags remaining`;
}

const isEnter = (e) => e.keyCode === 13 && showTags();

function createMarkup() {
  const tags = input.value.split(/[, ]/);
  const markup = [];
  if (totalTags() >= limit || !tags[0].length) overLimit();
  for (let i = 0; i < limit - totalTags(); i++) {
    if (!tags[i]) continue;
    markup.push(`
      <li class='interface-tag'>
        <span class='interface-tagName'>${tags[i]}</span>
        <span class='interface-close'>x</span>
      </li>
    `);
  }
  return markup.join('');
}

function init(e) {
  e.target.matches('.interface-clear') && clearTags();
  e.target.matches('.interface-close') && closeTag(e);
  e.target.matches('.interface-btn') && showTags();
}

input.addEventListener('input',createMarkup,false);
input.addEventListener('keydown',isEnter,false);
document.addEventListener('click',init,false);