<template>
  <div>
    This is a messenger
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";

export default {
  computed: {
    ...mapState(["meeting", "user"])
  },
  sockets: {},
  data() {
    return {
      messages: []
    };
  },
  methods: {
    getMessages(){
      axios.get(`/meeting/${this.meeting.id}/messages`)
          .then(response => {
              /* this.messages = response.data.map(cur => {
                  cur.timestamp_formatted = timeago.format(cur.timestamp);
                  cur.sent = this.user.UID == cur.user.UID ? true : false;
                  return cur;
              }); */
          })
          .catch(e => {
              console.log(e);
          });
    }
  },
  mounted() {
    this.sockets.subscribe('chat-message', data => {
      let msg = this.messages.filter(cur => cur.id == data.id);

      if (msg.length) {
          let date = new Date();

          msg[0].text = data.text;
          msg[0].timestamp = date;
          //msg[0].timestamp_formatted = timeago.format(date);
      } else {
          this.messages.push(data);
      }
    })

    this.$eventBus.$on("updateMeetingMessages", this.getMessages)
  }
}
</script>

<style>

</style>