var catsList = {
  cats: [{name: 'Jimmy', clicks: 0, img: "https://lh4.ggpht.com/dUJNejPqb_qLsV1kfWcvviqc7adxsw02BSAm8YLWNklP4lI6fQCLKXd-28uKuchtjoEUpqFN0K6kkTSDHw=s0#w=588&h=640"},
         {name: 'Arnold', clicks: 0, img: "https://lh4.ggpht.com/dUJNejPqb_qLsV1kfWcvviqc7adxsw02BSAm8YLWNklP4lI6fQCLKXd-28uKuchtjoEUpqFN0K6kkTSDHw=s0#w=588&h=640"}],
  addCat: function(obj) {
    this.cats.push(obj)
  },
  getCats: function() {
    return this.cats;
  }
};

var handlers = {
  addCat(name, img) {
    catsList.addCat({name: name, clicks: 0, img: img});
  },
  getCatByName: function(name) {
    var cats = catsList.getCats();
    for (var i = 0; i < cats.length; i++) {
      if (cats[i].name == name) {
        return cats[i];
      }
    }
  },
  getCats: function() {
    return catsList.getCats();
  },
  increaseClicks: function(name) {
    var cat = this.getCatByName(name);
    cat.clicks++;
  }
}

var view = {
  catsNamesView: function() {
    var catsUl = document.getElementById('catsUl');
    handlers.getCats().forEach(function(cat) {
      var catLi = document.createElement('li');
      var button = document.createElement('button');
      button.textContent = cat.name.toString();
      catLi.appendChild(button);
      catsUl.appendChild(catLi);
    });
  },
  catSessionView: function(name) {
    var cat = handlers.getCatByName(name);
    var catNameElement = document.createElement('h2');
    var catClicksElement = document.createElement('p');
    var catImgElement = document.createElement('img');
    var catSessionDiv = document.getElementById('catSession');
    catSessionDiv.textContent = '';
    catNameElement.textContent = cat.name;
    catImgElement.src = cat.img;
    catClicksElement.textContent = cat.clicks;
    catSessionDiv.appendChild(catNameElement);
    catSessionDiv.appendChild(catImgElement);
    catSessionDiv.appendChild(catClicksElement);
  },
  renderClicks: function() {
    var clicksElement = document.getElementById('catSession').lastChild;
    clicksElement.textContent = handlers.getCatByName(clicksElement.previousSibling.previousSibling.textContent).clicks;

  }
}

view.catsNamesView();

// Event listeners
(function() {
  var catsUl = document.getElementById('catsUl');
  var catSessionDiv = document.getElementById('catSession');

  catsUl.addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName == 'BUTTON') {
      view.catSessionView(target.textContent);
    }
  });

  catSessionDiv.addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName == 'IMG') {
      handlers.increaseClicks(target.previousSibling.textContent);
      view.renderClicks();
    }
  });

}());