<template>
    <li ref="todoItem">
      <input type="checkbox" />
      <span
        v-if="!editable"
        @click="editable = !editable"
      >
        {{ todo.text ? todo.text : "Click to edit Todo" }}
      </span>
      <input
        v-else
        type="text"
        :value="todo.text"
        @keyup.enter="editable = !editable"
      />
    </li>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref } from "vue"
  import ToDo from "@/models/ToDoModel"
  import { onClickOutside } from "@vueuse/core"
  export default defineComponent({
    name: "TodoItem",
    props: {
      todo: {
        type: Object as PropType<ToDo>,
        required: true
      }
    },
    setup() {
      const todoItem = ref(null)
      const editable = ref(false)
      onClickOutside(todoItem, () => {
        editable.value = false
      })
      return { todoItem, editable }
    }
  })
</script>

// @/store/index.ts
import { createStore } from 'vuex'
import Note from '@/models/NoteModel'
import { useStorage } from '@vueuse/core'
const localStorageNotes: unknown = useStorage('my-notes', [] as Note[])
export default createStore({
  state: {
    notes: localStorageNotes as Note[]
  },
  mutations: {
    addNote(state) {
      state.notes.push(note)
    },
   // mutations
  },
  actions: {
    // actions
  },
  getters: {
    // getters
  },
  strict: true
})

import { createStore } from 'vuex'
import Note from '@/models/NoteModel'
import ToDo from "@/models/ToDoModel"
import { useRefHistory } from '@vueuse/core'
import { ref } from 'vue'
const note: any = ref({
  title: "",
  todos: [] as ToDo[]
})
const { history, undo, redo, canUndo, canRedo, clear } = useRefHistory(note, {
  deep: true
})
export default createStore({
  state: {
    currentNote: note as Note,
    currentId: 0
  },
  mutations: {
    // mutations
    clearHistory() {
      clear()
    },
    undoChanges() {
      undo()
    },
    redoChanges() {
      redo()
    }
  },
  actions: {
  },
  getters: {
    canUndo() {
      return canUndo.value
    },
    canRedo() {
      return canRedo.value
    }
  },
  strict: true
})