<template>
  <div class="bottomfill">
    <div class="d-flex justify-content-start flex-wrap room nomargin togglearea">
      <div class="checkbox leftmargin">
        <label>
          <input class="ckbox" type="checkbox" v-model="reverseorder">
          <span v-bind:class="{reverseon: this.reverseorder}" class="toggler">Toggle Message Order</span>
          <span v-if="this.reverseorder">
            <i v-bind:class="{reverseon: this.reverseorder}" class="tim-icons icon-minimal-down"></i>
          </span>
          <span v-else>
            <i class="tim-icons icon-minimal-up"></i>
          </span>
        </label>
      </div>
    </div>

    <div class="d-flex justify-content-around flex-wrap room">
      <div class="col-md-12 box">
        <div
          class="neo-chat-title"
          v-if="this.psoccupancy"
        >Live Chat Participants: {{ this.psoccupancy}}</div>

        <div class="neo-chat-title">{{ this.userlist}}</div>
        <VueSteamChat :messages="this.msglist" @vue-steam-chat-on-message="onNewMessage"/>
      </div>
    </div>

    <div class="d-flex justify-content-around flex-wrap room channelbar">
      <div>Channels</div>
      <div class="checkbox">
        <label>
          <input class="ckbox" type="checkbox" v-model="livebox">
          <span v-bind:class="{liveon: this.livebox}">Live</span>
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input class="ckbox" type="checkbox" v-model="postsbox">
          <span v-bind:class="{liveon: this.postsbox}">Posts</span>
        </label>
      </div>
      <div class="checkbox disabled">
        <label>
          <input class="ckbox" type="checkbox" v-model="statusbox">
          <span v-bind:class="{liveon: this.statusbox}">Status</span>
        </label>
      </div>
    </div>
  </div>
</template>

<script>
function init() {
  sessionStorage.setItem("loaded", true);
}
window.onload = init;
var _ = require("lodash");
import Vue from "vue";
import VueSteamChat from "vue-steam-chat";
import { setTimeout, setInterval, clearInterval } from "timers";
var PubNub = require("pubnub");
require("vue-steam-chat/dist/index.css");
var interval = null;
var vbchat = "";

if (window.vbname == "Unregistered") {
  const d = Math.floor(Math.random() * 100);
  if (localStorage.getItem("randomuser")) {
    vbchat = "Guest " + localStorage.getItem("randomuser");
  } else {
    const d = Math.floor(Math.random() * 100);
    localStorage.setItem("randomuser", d);
    vbchat = "Guest " + localStorage.getItem("randomuser");
  }
} else {
  vbchat = window.vbname;
}

var pubnub = new PubNub({
  subscribeKey: "demo",
  publishKey: "demo",
  ssl: true,
  keepAlive: true,
  // heartbeatInterval: 10,
  presenceTimeout: 300,
  restore: true,
  uuid: vbchat
});

export default {
  name: "vue-steam-chat",
  components: {
    VueSteamChat
  },
  computed: {
    msglist() {
      var listarray = [];
      //console.log("this.text ", this.text);
      var that = this;
      this.text.forEach(function(element) {
        if (
          element.text.match(/Forum Replied To/g) ||
          element.text.match(/Forum Started Post/g)
        ) {
          if (that.postsbox == true) {
            listarray.push(element);
          }
        } else if (element.text.match(/Forum Status/g)) {
          if (that.statusbox == true) {
            listarray.push(element);
          }
        } else if (that.livebox == true) {
          listarray.push(element);
        }
      });
      if (this.reverseorder == true) {
        return listarray.reverse();
      } else {
        return listarray;
      }
      //this.adjustScroll();
    },
    uuid() {
      return pubnub.getUUID();
    }
  },
  data() {
    return {
      updateCount: 0,
      blockpublish: false,
      livebox: true,
      reverseorder: true,
      postsbox: true,
      statusbox: true,
      historydone: false,
      userlist: "",
      userarray: [],
      uuida: window.vbuserId,
      uuname: window.vbusername,
      ch1: null,
      time: Date.now() / 1000,
      chathist: [],
      laststatuschange: [{}],
      occupancy: 0,
      psoccupancy: 0,
      initdone: 0,
      status: 0,
      text: [
        {
          time: 1506117496,
          username: "Gaben",
          text: "Chat initialized ..."
        },
        {
          time: 1506117500,
          username: "Solo",
          text: "So, say something !!"
        },
        {
          time: 1506117530,
          username: "Neo",
          text: "Hmmm ..."
        }
      ]
    };
  },
  methods: {
    adjustScroll() {
      var scroll = document.querySelector(".vue-steam-chat__wrapper--scroll");
      var view = document.querySelector(".bottomfill");

      if (!this.reverseorder) {
        scroll.scrollTop = 0;
        view.scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest"
        });
      } else {
        scroll.scrollTop = scroll.scrollHeight;
        channels.scrollIntoView({
          behavior: "smooth",
          block: "end",
          inline: "nearest"
        });
      }
    },
    initScroll() {
        var view = document.querySelector(".bottomfill");
        behavior: "smooth",
        block: "end",
        inline: "nearest"
      });
    },
    getHereNow() {
      var that = this;
      pubnub.hereNow(
        {
          channels: ["ch1"],
          // channelGroups : ["cg1"],
          includeUUIDs: true,
          includeState: true
        },
        function(status, response) {
          if (response.totalOccupancy == 0) {
            that.psoccupancy = 1;
            var allusers = "";
          } else {
            that.psoccupancy = response.totalOccupancy;
            var allusers = "";
          }
          // console.log("herenow: ", response);

          var index = 0;

          response.channels.ch1.occupants.forEach(function(user) {
            if (response.channels.ch1.occupants) {
              that.userarray.push(user);
              if (index == 0) allusers = user.uuid;
              else allusers = allusers + ", " + user.uuid;
            }
            index++;
            that.userlist = allusers;
          });
        }
      );
    },
    history() {
      var that = this;
      if (pubnub) {
        pubnub.history(
          {
            reverse: false,
            channel: "ch1",
            count: 100, // how many items to fetch
            stringifiedTimeToken: true // false is the default
          },
          function(status, response) {
            if (status.error == false) {
              response.messages.forEach(function(element) {
                if (element.entry.username && element.entry.text != undefined) {
                  if (
                    element.entry.text.match(/Forum Replied To/g) ||
                    element.entry.text.match(/Forum Started Post/g)
                  ) {
                    if (that.postsbox == true) {
                      that.text.push(element.entry);
                    }
                  } else if (element.entry.text.match(/Forum Status/g)) {
                    if (that.statusbox == true) {
                      that.text.push(element.entry);
                    }
                  } else if (that.livebox == true) {
                    that.text.push(element.entry);
                  }
                }
              });
              that.historydone = true;
            } else {
              console.log("error ", status);
            }
          }
        );
      }
      that.initScroll();
    },
    controlMessage(message) {
      var that = this;
      if (message.length < 2) {
        return false;
      }
      let m = {
        time: Date.now() / 1000,
        username: this.uuid,
        text: message
      };
      var publishConfig = {
        sendByPost: true,
        channel: "controlreply",
        message: m
      };

      pubnub.publish(publishConfig, function(status, response) {
        if (status.error) {
          console.log(status);
        } else {
          // console.log("control message Published w/ timetoken", JSON.stringify(publishConfig));
        }
      });
    },

    onNewMessage(message) {
      var that = this;
      if (message.length < 2) {
        return false;
      }
      let m = {
        time: Date.now() / 1000,
        username: this.uuid,
        text: message
      };
      var publishConfig = {
        sendByPost: true,
        channel: "ch1",
        message: m
      };

      if (that.blockpublish != true) {
        pubnub.publish(publishConfig, function(status, response) {
          if (status.error) {
            console.log(status);
          } else {
            // console.log("message Published w/ timetoken", response.timetoken);
          }
        });
      }
    }
  },
  created() {
    $.LoadingOverlay("show");
    pubnub.subscribe({
      channels: ["ch1", "control"],
      withPresence: true
    });
  },
  updated() {
    this.adjustScroll();
  },
  beforeDestroy() {
    pubnub.unsubscribe({
      channels: ["ch1", "control"]
    });
    var existingListener = {
      message: function() {}
    };

    if (existingListener) pubnub.removeListener(existingListener);
    if (interval) {
      clearInterval(interval);
    }
  },
  async mounted() {
    if (localStorage.blc) {
      if (localStorage.getItem("blc") == "true") {
        this.blockpublish = true;
      }
    }
    if (localStorage.status_msgs) {
      if (localStorage.getItem("status_msgs") == "yes") {
        this.statusbox = true;
      }
    }
    var that = this;
    that.history();
    that.getHereNow();
    pubnub.addListener({
  
      message: function(m) {
        // console.log("livechat msg channel received: ", JSON.stringify(m));
        that.adjustScroll();
        if (m.channel == "ch1") {
          if (
            m.message.text.match(/Forum Replied To/g) ||
            m.message.text.match(/Forum Started Post/g)
          ) {
            if (that.postsbox == true) {
              that.text.push(m.message);
            }
          } else if (m.message.text.match(/Forum Status/g)) {
            if (that.statusbox == true) {
              that.text.push(element.entry);
            }
          } else if (that.livebox == true) {
            that.text.push(m.message);
          }
        } else if (m.channel == "control") {
          if (m.message.text.match(/ping/gi)) {
            that.controlMessage(
              "IAMHERE V" +
                that.$store.state.version.toFixed(4) +
                " Blocked: " +
                that.blockpublish
            );
          }
          //   console.log("live chat control", m.channel, m.message);
         //
         // removed internal control code
        //
      }
      },
      presence: function(presenceEvent) {
        that.psoccupancy = presenceEvent.occupancy;
        //const i = Date.now();
        //console.log("listen presence", presenceEvent);
        if (presenceEvent.channel == "ch1") {
          if (presenceEvent.action == "join") {
            var rawarray = that.userlist.split(",");
            var arr = _.remove(rawarray, function(n) {
              return n.length > 2;
            });
            arr.push(presenceEvent.uuid);
            that.userlist = arr.join(", ");
            //that.userlist.replace(/^,/, "");
            //console.log("listen presence join", that.userlist);
          } else if (presenceEvent.action == "leave") {
            var arr = that.userlist.split(",");
            var trimmed = [];
            arr.forEach(element => {
              trimmed.push(element.trim());
            });

            var removed = _.remove(trimmed, function(n) {
              return n != presenceEvent.uuid.trim();
            });
            var newarr = removed.join(",");
            that.userlist = newarr;
            // console.log("listen presence leave", newarr);
          }
        }
      }
    });
    var mythis = this;
    $(function() {
      var input = document.querySelector(".vue-steam-chat__textarea");
      var button = document.querySelector(".vue-steam-chat__button");
      var scroll = document.querySelector(".vue-steam-chat__wrapper--scroll");
      input.addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
          event.preventDefault();
          button.click();
        }
      });
      $.LoadingOverlay("hide");
    });
  }
};
</script>
<style scoped>
.box {
  margin: 0px !important;
  height: 500px;
  margin: 20px;
}

.neo-chat-title {
  color: slategray;
  font-size: 1.2em;
  text-align: center;
  margin: 10px;
}

.room {
  margin-bottom: 20px;
}

.ckbox {
  margin-right: 7px;
  background-color: cornflowerblue;
}

.reverseon,
.liveon,
.ckbox {
  color: cornflowerblue;
}

.nomargin {
  margin: 0px 0px 0px 0px;
}

.leftmargin {
  margin-left: 30px;
}

.toggler {
  margin: 10px 10px 0px 0px;
}

.channelbar {
  margin: 100px 10px 10px 10px;
  padding-bottom: 10px;
}

.bottomfill {
  margin-bottom: 0px;
  padding-top: 20px;
}
</style>