<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
    <h1>Список покупок</h1>
    <button onclick='showOnScreen.displayShoppingList()'>Показать список покупок</button>
    <button onclick='handlers.toggleAll()'>Вкл/выкл все</button>
    <div>
      <input type ='text' id ='addToShoppingListText'>
      <button onclick='handlers.addToShoppingList()'>Добавить в список покупок</button>
    </div>
    <div>
      <input type ='number' id ='changeShoppingListNumber'>
       <input type ='text' id ='changeShoppingListText'>
      <button onclick='handlers.changeShoppingList()'>Изменить покупку</button>
    </div>
    <div>
      <input type='number' id ='changeCounterPlace'>
      <input type='number' id ='changeCounterValue'>
      <button onclick='handlers.changeCounter()'>Изменить количество</button>
    </div>
    <ul>
      <!-- shopping list items appear here -->
    </ul>
    <script src="script.js"></script>
  </body>

</html>
var shoppingList = {
  list: [{
    item: 'milk',
    isBought: false,
    itemCounter: 1
  }, {
    item: 'beer',
    isBought: false,
    itemCounter: 1
  }, {
    item: 'sugar',
    isBought: false,
    itemCounter: 1
  }],
  displayShoppingList: function() {
    //debugger;
    if (this.list.length > 0) {
      for (var x = 0; x < this.list.length; x++) {
        if (this.list[x].isBought === true) {
          console.log('(x)' + this.list[x].item);
        } else {
          console.log('( )' + this.list[x].item);
        }
      }
    } else {
      console.log('Your shopping list is empty');
    }
  },
  addToShoppingList: function(item) {
    this.list.push({
      item: item,
      isBought: false,
      itemCounter: 1
    });
    this.displayShoppingList();
  },
  changeShoppingList: function(place, newItem) {
    this.list[place].item = newItem;
    this.displayShoppingList();
  },
  changeCounter: function(place, newCounter) {
    this.list[place].itemCounter = newCounter;
    this.displayShoppingList();
  },
  makeItemBought: function(place) {
    this.list[place].isBought = !this.list[place].isBought;
    this.displayShoppingList();
  },
  deleteFromShoppingList: function(place) {
    this.list.splice(place, 1);
    this.displayShoppingList();
  },

  toggleAllItems: function() {
    var allItems = this.list.length;
    var boughtItems = 0;
    this.list.forEach(function(listItem) {
      if (listItem.isBought === true) {
        boughtItems++;
      }
    });
    this.list.forEach(function(listItem) {
      listItem.isBought = (boughtItems === allItems) ? false : true;
    })
  }
};
var handlers = {
  showAll: function() {
    shoppingList.displayShoppingList();
  },
  toggleAll: function() {
    shoppingList.toggleAllItems();
    showOnScreen.displayShoppingList();
  },
  addToShoppingList: function() {
    var addToShoppingListInput = document.getElementById('addToShoppingListText');
    shoppingList.addToShoppingList(addToShoppingListInput.value);
    addToShoppingListInput.value = "";
    showOnScreen.displayShoppingList();
  },
  changeShoppingList: function() {
    var changeShoppingListInputNumber = document.getElementById('changeShoppingListNumber');
    var changeShoppingListInputText = document.getElementById('changeShoppingListText');
    shoppingList.changeShoppingList(changeShoppingListInputNumber.valueAsNumber, changeShoppingListInputText.value);
    changeShoppingListInputNumber.value = "";
    changeShoppingListInputText.value = "";
    showOnScreen.displayShoppingList();
  },
  deleteFromShoppingList: function(position) {
    shoppingList.deleteFromShoppingList(position);
    showOnScreen.displayShoppingList();
  }
};

var showOnScreen = {
  displayShoppingList: function() {
    var shoppingUnorderedList = document.querySelector('ul');
    shoppingUnorderedList.innerHTML = '';
    shoppingList.list.forEach(function(listItem, position){
      var shoppingListItem = document.createElement('li');
      var isBoughtDisplay = '';
    isBoughtDisplay = listItem.isBought ? '(x)' + listItem.item + ' ' + listItem.itemCounter : '( )' + listItem.item + ' ' +  listItem.itemCounter;
    shoppingListItem.id = position;
    shoppingListItem.textContent = isBoughtDisplay;

    shoppingListItem.appendChild(showOnScreen.createDeleteButton());

    shoppingUnorderedList.appendChild(shoppingListItem);



    });
  },
  createDeleteButton: function() {
    var deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete item';
    deleteButton.className = 'deleteButtonClass';
    return deleteButton;
  },
  eventListeners: function() {
    var shoppingUnorderedList = document.querySelector('ul');
    shoppingUnorderedList.addEventListener('click', function(event) {
      //console.log (event.target.parentNode.id);
      var buttonClicked = event.target;
      if (buttonClicked.className === 'deleteButtonClass') {
        handlers.deleteFromShoppingList(parseInt(buttonClicked.parentNode.id));
      }
    });

  }
};

showOnScreen.eventListeners();















//shoppingList.addToShoppingList('muffin');
//shoppingList.toggleAllItems();
//add multiple items at the same time - divide them by “,” and push one by one(?)
//counter on each item - add ‘counter’ property to item/isBought, increase by one (tap) or manually by counter (how? - figure out!)
//swipe movements and mobile devices adaptation (read docs)
/* Styles go here */