<template>
  <textarea
    @keyup.enter="addNote"
    v-model="content"
    rows="10"
    placeholder="Start typing something…"
    autofocus
  ></textarea>
  <div
    class="note"
    v-for="note in notes"
    :key="note.id"
    :class="{ selected: note.id === current }"
  >
    <span class="noteid">#{{ note.id }}</span
    >{{ note.text }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      notes: [
        { id: 0, text: 'This is a note' },
        { id: 1, text: 'And another one.' }
      ],
      current: null,
      content: null
    }
  },
  methods: {
    addNote() {
      this.notes.push({ id: this.notes.length + 1, text: this.content })
      this.content = ''
    }
  },
  computed: {},
  mounted() {
    document.addEventListener('keyup', e => {
      console.log(e.code)
      switch (e.code) {
        case 'KeyJ':
          // go down in the list, unless it's the last item
          this.current =
            this.current === null
              ? 0
              : this.notes[this.current + 1] === undefined
              ? this.current
              : this.current + 1
          break
        case 'KeyK':
          // go up in the list, unless it's the first item
          this.current =
            this.current === null
              ? 0
              : this.notes[this.current - 1] === undefined
              ? this.current
              : this.current - 1
          break
        case 'Delete':
          alert(`Delete note #${this.current}?`)
          break

        default:
          break
      }
    })
  }
}
</script>

<style scoped>
textarea {
  width: 100%;
  border-width: 0 0 1px 0;
  border-color: black;
  resize: none;
}

.note {
  border-width: 1px;
  padding: 5px;
  margin-bottom: 5px;
}

.selected {
  border-style: dashed;
  border-width: 1px;
}

.noteid {
  background-color: slateblue;
  color: white;
  border-radius: 5px;
  margin-right: 5px;
  margin-bottom: 2px;
  padding: 1px 15px;
  font-size: 0.7rem;
  display: block;
  width: 15px;
  font-family: monospace;
}
</style>
