<template>
  <div class="d-flex justify-content-around flex-wrap room">
    <div class="col-md-12 box">
      <div class="neo-chat-title" v-if="this.occupancy">People in Chat Room : {{ this.occupancy }}</div>
      <VueSteamChat :messages="chatsub" @vue-steam-chat-on-message="onNewMessage"/>
    </div>
    <div>Reload this page if you do not see the chat window.</div>
  </div>
</template>

<script>
import Vue from "vue";
import VueSteamChat from "vue-steam-chat";
import PubNubVue from "pubnub-vue";

require("vue-steam-chat/dist/index.css");
Vue.use(PubNubVue, {
  subscribeKey: "secret-sub-key",
  publishKey: "secret-pub-key",
  //  logVerbosity: true,
  uuid: window.vbusername
});

export default {
  name: "vue-steam-chat",
  components: {
    VueSteamChat,
    PubNubVue
  },

  computed: {
    uuid() {
      if (this.$store.state.chatname) return this.$store.state.chatname;
      else return "Guest " + Date.now;
    },
    chatsub() {
      if (this.ch1.length > 0) {
        this.text.push(this.ch1[this.ch1.length - 1].message);
        return this.text;
      } else return this.text;
    }
  },
  data() {
    return {
      history: null,
      occupancy: 0,
      initdone: 0,
      status: 0,
      ch1: this.$pnGetMessage("ch1"),
      // ch1: this.$pnGetMessage('ch1', null, 10),
      text: [
        {
          time: 1506117496,
          username: "Gaben",
          text: "Chat initialized ..."
        },
        {
          time: 1506117500,
          username: "Solo",
          text: "So, say something !!"
        },
        {
          time: 1506117530,
          username: "Neo",
          text: "Hmmm ..."
        }
      ]
    };
  },
  methods: {
    init() {
      var initchat = this.$pnGetMessage("ch1");
      if (initchat.length > 0 && this.initdone == 0) {
        this.text.push(initchat);
        this.initdone = 1;
      }
    },
    presence(ps) {
      this.occupancy = ps.occupancy;
      console.log("neo ps: " + JSON.stringify(ps));
    },
    onNewMessage(message) {
      let m = {
        time: Date.now() / 1000,
        username: this.uuid,
        text: message
      };
      this.$pnPublish(
        {
          sendByPost: true,
          channel: "ch1",
          message: m
        },
        function(status, response) {
          if (status.error) {
            // handle error
            console.log(status);
          } else {
            console.log("message Published w/ timetoken", response.timetoken);
          }
        }
      );
    }
  },
  beforeCreate() {
    this.$pnSubscribe({
      channels: ["ch1"],
      //autoload: 10,
      withPresence: true
    });
  },
  mounted() {
    this.$pnGetPresence("ch1", this.presence);
    $(function() {
      var input = document.getElementsByClassName("vue-steam-chat__textarea");
      var button = document.getElementsByClassName("vue-steam-chat__button");
      input[0].addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
          event.preventDefault();
          button[0].click();
        }
      });
    });
  }
};
</script>
<style scoped>
.box {
  height: 500px;
  margin: 20px;
}
.neo-chat-title {
  color: slategray;
  font-size: 1.2em;
  text-align: center;
  margin: 10px;
}
.room {
  margin-bottom: 20px;
}
</style>