<template>
  <div id="app">
    <h1>To do list</h1>
    <AddTodo v-on="add"/>
    <hr />
    <select v-model="filter">
      <option value="all">All</option>
      <option value="done">Done</option>
      <option value="todo">Todo</option>
    </select>
    <p v-if="!filterTodos.length">No todo!</p>
    <TodoList
      v-else-if="filterTodos.length"
      v-bind:todos="filterTodos"
      @remove="remove"
    />
  </div>
</template>
<script>
import TodoList from '@/components/TodoList'
import AddTodo from '@/components/AddTodo'
export default {
  data() {
    return {
      todos: [],
      filter: 'all'
    }
  },
  mounted() {
    fetch("https://jsonplaceholder.typicode.com/todos?_limit=5")
      .then(response => response.json())
      .then(json => this.todos = json)
  },
  components: {
    TodoList,
    AddTodo,
  },
  methods: {
    remove(id) {
      this.todos = this.todos.filter(item => item.id !== id)
    },
    add(newTodo) {
      this.todos.push(newTodo)
    }
  },
  computed: {
    filterTodos() {
      if (this.filter === 'all') {
        return this.todos
      }
      if (this.filter === 'done') {
        return this.todos.filter(item => item.completed)
      }
      if (this.filter === 'todo') {
        return this.todos.filter(item => !item.completed)
      }
      return []
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
select {
  padding: 5px;
  margin: 5px 5px 20px 5px;
}
</style>

<template>
  <li>
    <span v-bind:class="{ done: todo.completed }">
      <input
        v-bind:checked="todo.completed"
        type="checkbox"
        v-on:change="todo.completed = !todo.completed"
      />
      <strong>{{ index + 1 }}</strong>
      {{ todo.title | upper }}
    </span>
    <button class='rm' v-on:click="$emit('remove', todo.id)">×</button>
  </li>
</template>
<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    },
    index: Number
  },
  filters: {
    upper(value) {
      return value.toUpperCase()
    }
  },
}
</script>

<template>
  <div>
    <ul>
      <TodoItem
        v-for="(todo, index) of todos"
        v-bind:key="todo.id"
        v-bind:index="index"
        v-bind:todo="todo"
        v-on:remove="remove"
      />
    </ul>
  </div>
</template>
<script>
import TodoItem from '@/components/TodoItem'
export default {
  props: ['todos'],
  components: {
    TodoItem
  },
  methods: {
    remove(id) {
      this.$emit('remove', id)
    }
  }
}
</script>

this.todos = json