<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;
    // import Vuex from "vuex";
    // Vue.use(Vuex);

    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
    });
    var debounce = require("debounce");
    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 {
                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");
                var toggle = document.querySelector(".togglearea");
                var channels = document.querySelector(".channelbar");

                if (!this.reverseorder) {
                    scroll.scrollTop = 0;
                    //$("html,body").animate({ scrollTop: 0 }, "slow");
                    // view.scrollIntoView(true);
                    view.scrollIntoView({
                        behavior: "smooth",
                        block: "start",
                        inline: "nearest"
                    });
                } else {
                    scroll.scrollTop = scroll.scrollHeight;
                    // channels.scrollIntoView(false);
                    channels.scrollIntoView({
                        behavior: "smooth",
                        block: "end",
                        inline: "nearest"
                    });
                    //$("html,body").animate({ scrollTop: scroll.scrollHeight }, "slow");
                }
            },
            initScroll() {
                var view = document.querySelector(".bottomfill");
                var channels = document.querySelector(".channelbar");
                var scroll = document.querySelector(".vue-steam-chat__wrapper--scroll");
                //$("html,body").animate({ scrollTop: scroll.scrollHeight }, "slow");
                //channels.animate({ scrollIntoView: false }, "slow");
                view.scrollIntoView({
                    behavior: "smooth",
                    block: "end",
                    inline: "nearest"
                });
            },
            getHereNow() {
                var that = this;
                pubnub.hereNow({
                        channels: ["ch1"],
                        // channelGroups : ["cg1"],
                        includeUUIDs: true,
                        includeState: true
                    },
                    function(status, response) {
                        that.psoccupancy = response.totalOccupancy;
                        // console.log("herenow: ", response);
                        var allusers = "";
                        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;
                        });
                    }
                );
            },
            gmCallback(status, response) {
                console.log("gm callback", status, response);
            },
            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);
                        }
                    });
                    that.getHereNow();
                    // that.adjustScroll();
                }
            }
        },
        created() {
            $.LoadingOverlay("show");
            pubnub.subscribe({
                channels: ["ch1", "control"],
                withPresence: false
            });
        },
        updated() {
            debounce(this.getHereNow, 300, false);
            this.adjustScroll();
        },
        beforeDestroy() {
            pubnub.unsubscribeAll();
            // 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();

            pubnub.addListener({
                // status: function(statusEvent) {
                //   if (statusEvent.category === "PNConnectedCategory") {
                //     var newState = {
                //       name: this.uuid,
                //       timestamp: Date.now()
                //     };
                //     pubsub.setState({
                //       channels: ["ch1"],
                //       state: newState
                //     });
                //   }
                // },
                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);
                        }
                    } 

                     // 
                    // Removed lines for internal use only
                    //
   
                        that.getHereNow();
                    }
                    //that.text.push(m.message);
                    //console.log("newmsg: ", m.message);
                }
                // presence: function(presenceEvent) {
                //   that.psoccupancy = presenceEvent.occupancy;
                //   const i = Date.now();
                //   that.getHereNow();
                // }
            });
            this.getHereNow();
            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 {
        color: cornflowerblue;
    }

    .liveon {
        color: cornflowerblue;
    }

    .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>