const { createApp } = Vue;
createApp({
    data() {
      return {
        newTask: '',
        tasks:[
          { name: 'Learn Vue', completed: false },
          { name: 'Create a Vue project with the CLI', completed: true },
        ],
        editingIndex: null,
        editingTask: '',
      }
    },
    computed: {
      completedCount() {
          return this.tasks.filter(task => task.completed === true).length;
      }
    },
    methods: {
      addTask(){
        if (this.newTask.trim() !== '') {
          this.tasks.push({ name: this.newTask, completed: false });
          this.newTask = '';
        }
      },
      editTask(index) {
          this.editingIndex = index;
          this.editingTask = this.tasks[index].name;
      },
      cancelEdit() {
        this.editingIndex = null;
        this.editingTask = ''; 
      },
      saveEdit(index) {
        if(this.editingTask.trim() !== ''){ 
          this.tasks[index].name = this.editingTask;
          this.cancelEdit();
        }
      },
      deleteTask(index) {
        this.tasks.splice(index, 1);
      },
      completeTask(index) {
          this.tasks[index].completed = true;
      }
    }
}).mount('#app');