<template>
  <div>
    <h2>Tasks application</h2>
    <router-link to="/" class="btn btn-primary">Back</router-link>
    <hr />
    <AddTask @add-task="addTask" />
    <select class="form-select" v-model="filter">
      <option value="all">All</option>
      <option value="completed">Completed</option>
      <option value="not-completed">Not Completed</option>
      <option value="important">Important</option>
      <option value="not-important">Not Important</option>
    </select>

    <hr />

    <TaskList
      v-if="filteredTasks.length"
      v-bind:tasks="filteredTasks"
      @remove-task="removeTask"
    />
    <p v-else>No tasks!</p>
  </div>
</template>

<script>
import TaskList from "@/components/TaskList";
import AddTask from "@/components/AddTask";

export default {
  name: "app",
  data() {
    return {
      tasks: [
        {
          
          id: 1,
          title: "not completed not important",
          completed: false,
          important: false,
        },
        {
          
          id: 2,
          title: "not completed important",
          completed: false,
          important: true,
        },
        {
          
          id: 3,
          title: "completed not important",
          completed: true,
          important: false,
        },
      ],


      filter: "all",
    };
  },

  computed: {
    filteredTasks() {
      if (this.filter === "all") {
        return this.tasks;
      }

      if (this.filter === "completed") {
        return this.tasks.filter((t) => t.completed);
      }

      if (this.filter === "not-completed") {
        return this.tasks.filter((t) => !t.completed);
      }

      if (this.filter === "not-important") {
        return this.tasks.filter((t) => !t.important);
      }

      if (this.filter === "important") {
        return this.tasks.filter((t) => t.important);
      }
    },
  },

  
  methods: {
    removeTask(id) {
      this.tasks = this.tasks.filter((t) => t.id !== id);
    },
    addTask(task) {
      this.tasks.push(task);
    },
  },
  components: {
    TaskList,
    AddTask,

  },
};
</script>


