var todos = [{text: "take out the trash",
    done: false,
    id: 0
    }];

var currentTodo = {
    text: "",
    done: false,
    id: 0
}

document.getElementById("todo-input").oninput = function(e){
  currentTodo.text = e.target.value;
};

/*
//jQuery Version
$('#todo-input').on('input',function(e){
    currentTodo.text = e.target.value;
   });
*/

function DrawTodo(todo) {
  var newTodoHTML =`
  <div class="col col-12 p-2 todo-item" todo-id="${todo.id}">
  <div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" onchange="TodoChecked(${todo.id})" aria-label="Checkbox for following text input" ${todo.done&&"checked"} >
    </div>
  </div>
  <input type="text" readonly class="form-control ${todo.done&&"todo-done"} " aria-label="Text input with checkbox"
    value="${todo.text}">
  <div class="input-group-append">
    <button todo-id="${todo.id}" class="btn btn-outline-secondary bg-danger text-white" type="button" onclick="DeleteTodo(this);"
      id="button-addon2 ">X</button>
  </div>
  </div>
  </div>
  `;

    var dummy = document.createElement("DIV");
    dummy.innerHTML = newTodoHTML;
    document.getElementById("todo-container").appendChild(dummy.children[0]);
    
    /*
    //jQuery version
     var newTodo = $.parseHTML(newTodoHTML);
     $("#todo-container").append(newTodo);
    */

}

function RenderAllTodos() {

    var container = document.getElementById("todo-container");
    while (container.firstChild) {
      container.removeChild(container.firstChild);
    }
    /*
    //jQuery version
      $("todo-container").empty();
    */


    for (var i = 0; i < todos.length; i++) {
      DrawTodo(todos[i]);
    }
}

RenderAllTodos();

function DeleteTodo(button){

    var deleteID = parseInt(button.getAttribute("todo-id"));
    /*
    //jQuery version
      var deleteID = parseInt($(button).attr("todo-id"));
    */

    for(let i=0;i<todos.length;i++){
        if(todos[i].id === deleteID){
            todos.splice( i, 1 );
            RenderAllTodos();
            break;
        }
    }
}

function TodoChecked(id){
    todos[id].done = !todos[id].done;
    RenderAllTodos();
}

function CreateTodo(){
    newtodo ={
       text:currentTodo.text,
       done:false,
       id:todos.length 
    }
    todos.push(newtodo);
    RenderAllTodos();
}