<template>
    <li :class="{ completed: todo.done, editing: editing }" class="todo">
      <div class="view">
        <input
          :checked="todo.done"
          class="toggle"
          type="checkbox"
          @change="toggleTodo( todo)"
        >
        <label @dblclick="editing = true" v-text="todo.text" />
        <button class="destroy" @click="deleteTodo( todo )" />
      </div>
      <input
        v-show="editing"
        v-focus="editing"
        :value="todo.text"
        class="edit"
        @keyup.enter="doneEdit"
        @keyup.esc="cancelEdit"
        @blur="doneEdit"
      >
    </li>
  </template>
  
  <script>
  export default {
    name: 'Todo',
    directives: {
      focus(el, { value }, { context }) {
        if (value) {
          context.$nextTick(() => {
            el.focus()
          })
        }
      }
    },
    props: {
      todo: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    data() {
      return {
        editing: false
      }
    },
    methods: {
      deleteTodo(todo) {
        this.$emit('deleteTodo', todo)
      },
      editTodo({ todo, value }) {
        this.$emit('editTodo', { todo, value })
      },
      toggleTodo(todo) {
        this.$emit('toggleTodo', todo)
      },
      doneEdit(e) {
        const value = e.target.value.trim()
        const { todo } = this
        if (!value) {
          this.deleteTodo({
            todo
          })
        } else if (this.editing) {
          this.editTodo({
            todo,
            value
          })
          this.editing = false
        }
      },
      cancelEdit(e) {
        e.target.value = this.todo.text
        this.editing = false
      }
    }
  }
  </script>