import LikeButton from './like-button.js'

export default {
  name: 'Comments',

  components: { LikeButton },

  props: ['messageID'],

  methods: {
    commentObjects(objects) {
      console.log(111111111111)
      console.log(objects.filter(o=>'like' in o))
      console.log(objects.filter(o=>'comment' in o))
      return objects.filter(o=>
                      'comment' in o &&
                      'timestamp' in o &&
                      o.comment == this.messageID &&
                      typeof o.timestamp == 'number')
                      .sort((a,b)=>
                        objects.filter(o=>
                        'like' in o &&
                        o.like == a._id).length
                        < objects.filter(o=>
                        'like' in o &&
                        o.like == b._id).length
                      )
    },

    sendComment(objects) {
      this.$graffitiUpdate({
        comment: this.messageID,
        timestamp: Date.now(),
        message: this.message,
        _tags: [this.messageID]
      })
    }
  },

  template: `
    <graffiti-objects :tags="[messageID]" v-slot="{objects}">
      <details>
        <summary>Comment</summary>
        <form @submit.prevent="sendComment(objects)">
          <input v-model="message">
          <input type="submit" value="Submit"/>
        </form>
      </details>
      <details open>
        <summary>Collapse thread</summary>
        <ul v-for="object in commentObjects(objects)">
          <li>
            <Name :of="object._by"/>
            {{ object.message }}
            <LikeButton :messageID="object._id" :parent="messageID"/>
            <template v-if="object._by==$graffitiMyID">
              <button @click="object.message+='!!';object._update()">
                ‼️
              </button>

              <button @click="object.message='deleted';object._update()">
                ❌
              </button>
            </template>
            <Comments :messageID="object._id" />
          </li>
        </ul>
      </details>
    </graffiti-objects>`
}