const mylist = [{ desc: "Buy Milk", id: 4567 }, { desc: "Learn JS", id: 1024 }];

class Store {
  //JSON.stringify(value)
  //JSON.parse(localStorage.value)
  //readStore in constructor
  //writeStore: add Item, delete item, emptyy entire list

  //check that localStorage.list is not undefined.
  readStore = () => null;

  writeStore = list => null;
}

class ToDo extends Store {
  constructor() {
    super();
    this.list = [];
    this.setUpForm();
    this.draw();
  }

  draw = () => {
    this.listEL.innerHTML = this.mapListToMarkup();
    this.updateEventHandlers();
  };

  updateEventHandlers = () => {
    let items = document.querySelectorAll(".item");
    items.forEach(item => item.addEventListener("click", this.selectItem));
  };

  selectItem = e => {
    let id = Number(e.currentTarget.getAttribute("data-id"));
    this.list = this.list.filter(item => item.id !== id);
    // this.updateList();
    console.log(this.list)
    this.draw()
  };

  mapListToMarkup = () =>
    this.list
      .map(item => `<p class="item" data-id=${item.id}>${item.desc}</p>`)
      .join("");

  setUpForm() {
    //add to do items here
    this.listEL = document.querySelector(".list");
    //FORM: it listens for SUBMIT events
    this.formEL = document.querySelector(".todo");
    //Add button listens for click
    this.addEL = document.querySelector(".addItem");
    //Empty button listens for click
    this.emptyEL = document.querySelector(".empty");

    this.formEL.addEventListener("submit", this.addItem);
    this.emptyEL.addEventListener("click", this.emptyForm);
  }

  addItem = e => {
    //submit event
    e.preventDefault();
    // console.log(this.addEL.value);
    // console.log(listEL.push(this.addEL) )
    //create a todo object { desc:"Buy Milk", id:4567 },
    //Push into list TO_DO_LIST
    let item = { desc: this.addEL.value, id: Math.floor(Math.random() * 256) };
    this.list.push(item);
    console.log(item);
    console.log("My list: " + this.list);
    this.draw();
  };

  //Clear list

  emptyForm = () => {
    this.list = [];
    this.draw();
  };

  //Click on an item: deletes it: Filter by ID
}

let to = new ToDo();