let todos = [
  {id: 0, name: 'Buy milk', due: moment('2019-05-30'), isDone: true},
  {id: 1, name: 'Buy beer', due: '2019-06-03', isDone: false},
  {
    id: 2,
    name: 'Read "The Hitchhiker\'s Guide to the Galaxy" book',
    due: '2019-06-14',
    isDone: false
  }
];

const statics = {
  id: todos.length
};

const populateTodos = (todos, container) => {
  const $div = $(container);
  $div.empty();
  todos.forEach((element) => {
    $div.append(`
    <div>
      <input data-check-id="${element.id}" type="checkbox" ${
      element.isDone ? 'checked' : ''
    }/>
      <span>${element.name} - ${moment(element.due).format(
      'MMMM Do YYYY'
    )}</span>
      <button data-id="${element.id}">X</button>
    </div>
    `);
  });
  // Finish the function
};

const todoView = (todo, container) => {
  const $div = $(container);
  $div.append(`
  <div class="todo-single">
    <input data-check-id="${todo.id}" type="checkbox" ${
    todo.isDone ? 'checked' : ''
  }/>
    <span>${todo.name} - ${moment(todo.due).format('MMMM Do YYYY')}</span>
    <button data-id="${todo.id}">X</button>
  </div>
  `);
};

(() => {
  populateTodos(todos, '#todos');
  $(document).on('click', '#btn-add', (ev) => {
    const todotext = $('#todo-text').val();
    const tododate = $('#todo-date').val();
    console.log(moment(tododate));
    if (!moment(tododate).isValid() || moment(tododate).isSameOrBefore()) {
      alert('Invalid date');
      return;
    }
    const newToDo = {
      id: statics.id++,
      name: todotext,
      due: moment(tododate),
      isDone: false
    };

    todos.push(newToDo);
    populateTodos(todos, '#todos');
    $('#todo-text').val('');
    $('#todo-date').val('');
    alert('Todo Added!');
  });

  // Remove event
  $(document).on('click', '#todos > div > button', (ev) => {
    alert('Todo Deleted!');
    const todoId = $(ev.target).attr('data-id');
    todos = todos.filter((el) => el.id !== Number(todoId));
    populateTodos(todos, '#todos');
  });

  // Check event
  $(document).on('click', '#todos > div > input', (ev) => {
    const todoId = $(ev.target).attr('data-check-id');
    alert('Todo Toggled!');
    todos = todos.map((el) => {
      if (el.id === todoId) {
        el.isDone = !el.isDone;
      }
      return el;
    });
  });
})();