<template>
  <div v-for="(nodes, index) in myArray" :key="index">
    <form class="nodes">
      <template v-if="nodes.read_mode == false">
        <textarea
          v-model="nodes.node_text"
          @input="editNode"
          :id="nodes.node_id"
          ref="textentry"
          placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
          rows="5"
        ></textarea>
        <p class="info">*markdown supported &amp; autosaves</p>
        <button>Colour</button>
        <button>Shape</button>
        <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
        <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
      </template>
      <template v-else>
        <p class="readmode" :id="nodes.node_id">{{ nodes.node_text }}</p>
        <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
      </template>
    </form>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'

// import marked from 'marked'

export default {
  name: 'MyNodes',

  props: {
    added: Boolean,
  },

  data() {
    return {
      myArray: [],
    }
  },

  computed: {
    ...mapState({
      myNodes: (state) => state.myNodes,
    }),
  },

  watch: {
    added: function () {
      setTimeout(this.loadData, 500)
    },
  },

  mounted() {
    setTimeout(this.loadData, 500)
    if (localStorage.nogg_name && localStorage.nogg_microcosm) {
      var devicename = localStorage.nogg_name
      var microcosm = localStorage.nogg_microcosm
      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
    } else {
      console.log('no')
      // go home
    }
  },

  methods: {
    loadData() {
      var nodesFiltered = this.myNodes.myNodes.filter(
        (nodes) => nodes.node_deleted == false
      )
      this.$store.dispatch('getMynodes')
      this.myArray = nodesFiltered.reverse()
    },

    editNode(e) {
      var nodeid = e.target.id
      var nodetext = e.target.value
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },

    discardNode(e) {
      if (confirm('Confirm discard?')) {
        this.$store.dispatch('discardNode', { e })
        setTimeout(this.loadData, 500)
      } else {
        // nothing happens
      }
    },

    toggleMode(e) {
      this.$store.dispatch('toggleMode', { e })
      setTimeout(this.loadData, 500)
    },
  },
}
</script>

<style scoped>
.nodes {
  width: 95%;
  border: 2px dashed black;
  background-color: rgb(155, 194, 216);
  margin-top: 1em;
  margin-left: 0.5em;
}

textarea {
  font-size: 1em;
  resize: none;
  border: none;
  background-color: rgb(187, 225, 247);
  width: 100%;
  box-sizing: border-box;
}
</style>