<script>
export default{  
  data(){
    return {
      chk_change: false,
      chk_hide: false,
      chk_side_menu: false,
      tasks_edit: {},
      task_new: "",
      id: 0,
      tasks: [{id: 0, text: "Сделать системный анализ", done: true},
                 {id: 1, text: "Выучить UE5", done: false},
                 {id: 2, text: "Сделать юзабилити", done: false},
                 {id: 3, text: "Сделать Шабалина", done: false},
                 {id: 4, text: "Сделать геймификацию для En+", done: true}],
    }
  },

  mounted(){
    if (localStorage.getItem('tasks')){
      this.tasks = JSON.parse(localStorage.getItem('tasks'))
    }
    if (localStorage.getItem('id')){
      this.id = JSON.parse(localStorage.getItem('id'));
    }
  },

  watch: {
    tasks: {
      handler(new_list){
        const parsed = JSON.stringify(new_list)
        localStorage.setItem('tasks', parsed)
      },
      deep: true
    },
    id: {
      handler(new_id){
        const parsed = JSON.stringify(new_id)
        localStorage.setItem('id', parsed)
      },
    }
  },

  methods: {
    changing_task(){
      for (const task in this.tasks){
        if(this.tasks[task].id == this.tasks_edit.id){
          this.tasks[task].text = this.tasks_edit.text
          this.tasks_edit = {}
          break
        }
        this.chk_side_menu = false
        this.chk_change = false
      }
    },
    change_side_menu(){
      this.chk_side_menu = true
    },
    adding_task(){
      this.chk_change = false
      if (this.task_new){
        this.tasks.push({id: this.id++, text: this.task_new, done: false});
        this.task_new = '';
      }
    },
    remove_task(task){
      this.tasks = this.tasks.filter(keke => keke != task);
    },
    change_task(task){
      this.chk_change = true
      Object.assign(this.tasks_edit, task)
      this.change_side_menu()
    },
    clear_tasks(){
      this.tasks = []
      localStorage.removeItem('tasks')
      localStorage.removeItem('id')
    }
  },

  computed: {
    hiding_tasks(){
      if(this.chk_hide){
        return this.tasks.filter(keke => keke.done == false)
      }
      return this.tasks
    }
  }
}
</script>



<template>
    <header>
      <h1>Шадрин Влад 14323-ДБ VueJS</h1>
    </header>

    <ul>
      <li v-for="task in hiding_tasks" v-bind:key="task">
        <div class="task" :class="{task_done : task.done}" @click="change_task(task)">
          <input @click="prevent" type="checkbox" v-model="task.done">
          <span :class="{task_done : task.done}">{{task.text}}</span>
          <div class="btn-remove" @click="remove_task(task)">Удалить</div>
        </div>
      </li>
    </ul>

    <div class="btns-main">
      <button class="btn-main btn-add" @click="change_side_menu(); chk_change=false">Добавить</button>
      <button class="btn-main btn-hide" @click="chk_hide = !chk_hide">{{chk_hide ? 'Показать всё' : 'Спрятать выполненные'}}</button>
      <button class="btn-main btn-clear" @click="clear_tasks">Очистить список</button>
    </div>

    <div class="side-menu" :class="{side_menu_show : chk_side_menu}">
      <div class="btn-close" @click="chk_side_menu = false; chk_change=false">Закрыть</div>

      <form v-if="!chk_change" @submit.prevent="adding_task" class="side-menu-form">
        <textarea rows="4" v-model="task_new" placeholder="Поле для ввода"  class="side-menu-text"></textarea>
        <button type="submit" @click="chk_side_menu = false" class="side-menu-btn-submit">Принять</button>
      </form>

      <form v-else @submit.prevent="changing_task" class="side-menu-form">
        <textarea rows="4" v-model="tasks_edit.text" class="side-menu-text"></textarea>
        <button type="submit" class="side-menu-btn-submit">Принять</button>
      </form>
    </div>
</template>
