<template>
  <f7-page>
    <f7-navbar
      :title="`Online: ${number_online}`"
      :subtitle="`Messages sent: ${total_group_messages}`"
      back-link="Back"
    >
      <f7-nav-right>
        <span v-if="app_state">
          <f7-link href="/livescores/">Live</f7-link> &nbsp;</span
        >
        <span v-else>G-Closed &nbsp;</span>

        <f7-link popover-open=".popover-menu" v-if="user_status == '3'">
          <i class="f7-icons">ellipsis_vertical</i>
        </f7-link>

        <f7-link
          popover-open=".popoverModerator-menu"
          v-if="user_status == '2'"
        >
          <i class="f7-icons">ellipsis_vertical</i>
        </f7-link>

        <f7-link popover-open=".popoverUser-menu" v-if="user_status == '1'">
          <i class="f7-icons">ellipsis_vertical</i>
        </f7-link>
      </f7-nav-right>
    </f7-navbar>

    <f7-messagebar
      :placeholder="placeholder"
      ref="messagebar"
      :attachments-visible="attachmentsVisible"
      :sheet-visible="sheetVisible"
    >
      <f7-link
        icon-ios="f7:folder"
        icon-aurora="f7:folder"
        icon-md="material:folder"
        slot="inner-start"
        @click="launchFilePicker"
      ></f7-link>
      <f7-link
        icon-ios="f7:camera_fill"
        icon-aurora="f7:camera_fill"
        icon-md="material:camera_alt"
        slot="inner-start"
        @click="sheetVisible = !sheetVisible"
      ></f7-link>
      <f7-link
        icon-ios="f7:arrow_up_fill"
        icon-aurora="f7:arrow_up_fill"
        icon-md="material:send"
        slot="inner-end"
        @click="sendMessage"
      ></f7-link>
      <f7-messagebar-attachments>
        <f7-messagebar-attachment
          v-for="(image, index) in attachments"
          :key="index"
          :image="image"
          @attachment:delete="deleteAttachment(image)"
        ></f7-messagebar-attachment>
      </f7-messagebar-attachments>
      <f7-messagebar-sheet>
        <f7-messagebar-sheet-image
          v-for="(image, index) in images"
          :key="index"
          :image="image"
          :checked="attachments.indexOf(image) >= 0"
          @change="handleAttachment"
        ></f7-messagebar-sheet-image>
      </f7-messagebar-sheet>
    </f7-messagebar>

    <f7-messages ref="messages">
      <div
        class="messages"
        v-for="(messages, index) in group_messages"
        :key="index"
      >
        <f7-messages-title>
          <b>{{ index }}</b>
        </f7-messages-title>
        <f7-message
          v-for="(message, i) in messages"
          :key="i"
          :type="message.type"
          :image="message.image"
          :name="message.displayName + openBraket + message.club + closeBraket"
          :club="message.club"
          :avatar="message.avatar"
          :first="isFirstMessage(message, index)"
          :last="isLastMessage(message, index)"
          :tail="isTailMessage(message, index)"
        >
          <span slot="text" v-if="message.text" v-html="message.text"></span>
          <span
            class="chat-time"
            slot="text"
            v-if="message.text"
            v-html="message.smalldate"
          ></span>
        </f7-message>

        <f7-message
          v-if="typing_message_group > 0"
          type="received"
          :typing="true"
          :first="true"
          :last="true"
          :tail="true"
          :header="`${typing_message_group} Person(s) typing`"
        ></f7-message>
      </div>
    </f7-messages>
    <input
      type="file"
      ref="file"
      style="display: none"
      @change="onFilePicked"
      multiple
    />

    <f7-popover class="popover-menu">
      <f7-list>
        <f7-list-item
          @click="lockApp()"
          popover-close
          title="Close Gateway"
        ></f7-list-item>
        <f7-list-item
          @click="openApp()"
          popover-close
          title="Open Gate"
        ></f7-list-item>
        <f7-list-item
          @click="sendBroadCast()"
          popover-close
          title="Send Broadcast Message"
        ></f7-list-item>

        <f7-list-item
          @click="liveScores()"
          popover-close
          title="Live Scores"
        ></f7-list-item>

        <f7-list-item
          @click="sportsUpdate()"
          popover-close
          title="Sports Update"
        ></f7-list-item>

        <f7-list-item
          @click="standing()"
          popover-close
          title="Standings"
        ></f7-list-item>

        <f7-list-item
          @click="placeAdvert()"
          popover-close
          title="Place Advert"
        ></f7-list-item>
      </f7-list>
    </f7-popover>

    <f7-popover class="popoverModerator-menu">
      <f7-list>
        <f7-list-item
          @click="lockApp()"
          popover-close
          title="Close Gateway"
        ></f7-list-item>
        <f7-list-item
          @click="openApp()"
          popover-close
          title="Open Gate"
        ></f7-list-item>
        <f7-list-item
          @click="sendBroadCast()"
          popover-close
          title="Send Broadcast Message"
        ></f7-list-item>
        <f7-list-item
          @click="liveScores()"
          popover-close
          title="Live Scores"
        ></f7-list-item>

        <f7-list-item
          @click="sportsUpdate()"
          popover-close
          title="Sports Update"
        ></f7-list-item>

        <f7-list-item
          @click="standing()"
          popover-close
          title="Standings"
        ></f7-list-item>
      </f7-list>
    </f7-popover>

    <f7-popover class="popoverUser-menu">
      <f7-list>
        <f7-list-item
          @click="liveScores()"
          popover-close
          title="Live Scores"
        ></f7-list-item>
        <f7-list-item
          @click="sportsUpdate()"
          popover-close
          title="Sports Update"
        ></f7-list-item>

        <f7-list-item
          @click="standing()"
          popover-close
          title="Standings"
        ></f7-list-item>
      </f7-list>
    </f7-popover>
  </f7-page>
</template>

<script>
import firebase from "firebase";
export default {
  data() {
    return {
      user_uid: null,
      openBraket: " (",
      closeBraket: ")",
      chatgroup: null,
      attachments: [],
      sheetVisible: false,
      typingMessage: null,
      messagesData: [],
      responseInProgress: false,
      appState: 1,
      moderator: true,
      //user_status: null
    };
  },
  computed: {
    total_group_messages() {
      return this.$store.getters.total_group_messages;
    },
    number_online() {
      return this.$store.getters.number_online;
    },
    typing_message_group() {
      return this.$store.getters.typing_message_group;
    },

    app_state() {
      return this.$store.getters.app_state;
    },
    user_status() {
      return this.$store.getters.user_status;
    },
    chat_group_name() {
      return this.$store.getters.chat_group_name;
    },
    group_messages() {
      return this.$store.getters.group_messages;
    },
    images() {
      return this.$store.getters.images;
    },
    attachmentsVisible() {
      const self = this;
      return self.attachments.length > 0;
    },
    placeholder() {
      const self = this;
      return self.attachments.length > 0 ? "Add comment or Send" : "Message";
    },
  },
  watch: {
    typing_message_group(value) {
      // console.log("am here nosa", value);
      if (value == 1) {
        //this.resetTypingMessageGroup();
      }
    },
  },
  beforeDestroy() {
    //console.log("Yes man");
    this.$store.dispatch("statisticsUsersOnlineRemove");
  },
  mounted() {
    const self = this;
    self.$f7ready(() => {
      self.messagebar = self.$refs.messagebar.f7Messagebar;
      self.messages = self.$refs.messages.f7Messages;
    });

    this.$store.dispatch("getGroupName2");
  },
  methods: {
    sendBroadCast() {
      //  console.log("BroadCast Message");

      this.$f7.popover.close();
      var dialog = this.$f7.dialog
        .create({
          title: "Send Broadcast Message",
          text: "",
          content:
            '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input class="dialog-input" type="text" placeholder="Enter Title"  required maxlength="50"> <div class="item-input-wrap"><input class="dialog-input body" type="textarea" placeholder="Enter Message"  resizable required maxlength="200"></div></div></div>',

          buttons: [{ text: "Cancel", close: true }, { text: "Send" }],
          onClick: (dialog, index) => {
            //console.log("nosa");
            //      console.log(dialog.$el.find(".body").val());
            var title_field = dialog.$el.find(".dialog-input").val().trim();

            var body_field = dialog.$el.find(".body").val().trim();
            if (title_field != "" && body_field != "") {
              var payload = {};
              payload.title = title_field;
              payload.message_details = body_field;
              this.$store.dispatch("pushNotifications", payload);

              var payloadMessage = {
                group_name: this.chat_group_name,
                message:
                  "Broadcast: Title: " +
                  title_field +
                  " Message: " +
                  body_field,
                img: null,
              };
              this.$store.dispatch("sendGroupMessage", payloadMessage);
              this.$f7.dialog.close();
            } else {
              //console.log("response", response);
              if (index == 1) {
                this.$store.commit("setAlertMessage", "Fields cannot be empty");
              }
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
    },
    liveScores() {
      this.$f7router.navigate("/livescores/");
      this.$f7.popover.close();
    },
    sportsUpdate() {
      this.$f7router.navigate("/sportsupdate/");
      this.$f7.popover.close();
    },

    standing() {
      this.$f7router.navigate("/standings/");
      this.$f7.popover.close();
    },
    placeAdvert() {
      this.$f7.popover.close();

      var dialog = this.$f7.dialog
        .create({
          title: "Provide Advert Details",
          text: "",
          content:
            '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input class="dialog-input-URL" type="text" placeholder="URL"  required validate  maxlength="200"></div><div class="item-input-wrap"><input class="dialog-input-image" type="text" placeholder="Image URL"  required validate  maxlength="200"></div><div class="item-input-wrap"><input class="dialog-input-alternate" type="text" placeholder="Alternate"  required validate  maxlength="100"></div><div class="item-input-wrap"><input class="dialog-input-textmessage" type="text" placeholder="Text Message"  required validate  maxlength="200"></div><div class="item-input-wrap"><input class="dialog-input-country" type="text" placeholder="Country"  required validate  maxlength="50"></div></div>',
          buttons: [{ text: "Cancel", close: true }, { text: "Submit" }],
          onClick: (dialog, index) => {
            //console.log("nosa");
            //console.log(dialog.$el.find(".dialog-input").val());
            var responseURL = dialog.$el.find(".dialog-input-URL").val().trim();
            var responseImage = dialog.$el
              .find(".dialog-input-image")
              .val()
              .trim();
            var responseAlternate = dialog.$el
              .find(".dialog-input-alternate")
              .val()
              .trim();
            var responseTextMessage = dialog.$el
              .find(".dialog-input-textmessage")
              .val()
              .trim();
            var responseCountry = dialog.$el
              .find(".dialog-input-country")
              .val()
              .trim();

            if (responseURL.length == 0) {
              this.$store.commit("setAlertMessage", "Provide URL message");
              return;
            }

            if (responseImage.length == 0) {
              this.$store.commit("setAlertMessage", "Provide Image message");
              return;
            }
            if (responseAlternate.length == 0) {
              this.$store.commit(
                "setAlertMessage",
                "Provide Alternate message"
              );
              return;
            }
            if (responseTextMessage.length == 0) {
              this.$store.commit("setAlertMessage", "Provide Text message");
              return;
            }
            if (responseCountry.length == 0) {
              this.$store.commit("setAlertMessage", "Provide Country message");
              return;
            }
            //console.log("URL", responseURL);
            //console.log("Image", responseImage);
            //console.log("Alternate", responseAlternate);
            //console.log("TextMessage", responseTextMessage);
            //console.log("Country", responseCountry);

            //if (responseURL.length != 0) {
            //console.log("data", response);
            // A post entry.
            var postData = {
              url: responseURL,
              image: responseImage,
              alternate: responseAlternate,
              textMesage: responseTextMessage,
              country: responseCountry,
            };
            var payload = postData;
            this.$store.dispatch("placeAdvert", payload);
            this.$store.commit("setAlertMessage", "Advert Placed Successfully");
            // }
            //}
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();

      this.$f7.popover.close();
    },
    lockApp() {
      this.$store.dispatch("closeAppState");
      this.$store.dispatch("getAppState");
      // console.log("Lock routine");
      this.$f7.popover.close();
    },

    openApp() {
      this.$store.dispatch("openAppState");
      this.$store.dispatch("getAppState");
      //console.log("open routine");
      this.$f7.popover.close();
    },
    launchFilePicker() {
      this.$refs.file.click();
    },
    onFilePicked() {
      this.$store.dispatch("readFileMessage");
    },

    leaveGroup() {
      var payload = {};
      payload.group_name = this.chat_group_name;
      this.$store.dispatch("leaveGroup", payload);
    },
    goto(page) {
      this.$f7router.navigate(page);
    },
    isFirstMessage(message, index) {
      const self = this;
      const previousMessage = self.messagesData[index - 1];
      if (message.isTitle) return false;
      if (
        !previousMessage ||
        previousMessage.type !== message.type ||
        previousMessage.name !== message.name
      )
        return true;
      return false;
    },
    isLastMessage(message, index) {
      const self = this;
      const nextMessage = self.messagesData[index + 1];
      if (message.isTitle) return false;
      if (
        !nextMessage ||
        nextMessage.type !== message.type ||
        nextMessage.name !== message.name
      )
        return true;
      return false;
    },
    isTailMessage(message, index) {
      const self = this;
      const nextMessage = self.messagesData[index + 1];
      if (message.isTitle) return false;
      if (
        !nextMessage ||
        nextMessage.type !== message.type ||
        nextMessage.name !== message.name
      )
        return true;
      return false;
    },
    deleteAttachment(image) {
      const self = this;
      const index = self.attachments.indexOf(image);
      self.attachments.splice(index, 1)[0]; // eslint-disable-line
    },
    handleAttachment(e) {
      const self = this;
      const index = self.$$(e.target).parents("label.checkbox").index();
      const image = self.images[index];
      if (e.target.checked) {
        // Add to attachments
        self.attachments.unshift(image);
      } else {
        // Remove from attachments
        self.attachments.splice(self.attachments.indexOf(image), 1);
      }
    },
    async sendMessage() {
      if (window.hasOwnProperty("cordova")) {
        let network_status = await this.$store.dispatch("checkConnection");
        if (network_status == "offline") {
          this.$store.commit(
            "setAlertMessage",
            "It seems you are offline. Kindly check internet connection to continue..."
          );
          return;
        }
      }
      await this.$store.dispatch("getUserStatus");
      await this.$store.dispatch("getAppState");
      // console.log("chat app state", this.app_state);
      //console.log("user type", this.user_status);
      if (!this.app_state && this.user_status == "1") {
        this.$store.commit(
          "setAlertMessage",
          "Only moderators can send messages now"
        );

        return;
      }

      if (this.user_status == "0") {
        this.$store.commit(
          "setAlertMessage",
          "You have been banned from using this service"
        );

        return;
      }
      const self = this;
      const text = self.messagebar.getValue().replace(/\n/g, "<br>").trim();
      const messagesToSend = [];
      self.attachments.forEach((attachment) => {
        messagesToSend.push({
          image: attachment,
        });
      });
      if (text.trim().length) {
        messagesToSend.push({
          text,
        });
      }
      if (messagesToSend.length === 0) {
        return;
      }

      if (self.attachments.length > 0) {
        _.forEach(self.attachments, (attachment) => {
          self.$store.dispatch("uploadChatImages", attachment).then((url) => {
            var payload = {
              group_name: this.chat_group_name,
              message: text,
              img: url,
            };
            self.$store.dispatch("sendGroupMessage", payload);
            // self.$store.dispatch("sendLatestGroupMessage", payload);
          });
        });
      } else {
        var payload = {
          group_name: this.chat_group_name,
          message: text,
          img: null,
        };
        self.$store.dispatch("sendGroupMessage", payload);
        //self.$store.dispatch("sendLatestGroupMessage", payload);

        //send to mysal database
        //console.log("http");
        var country = await this.$store.dispatch("getUserCountry");
        var email = await this.$store.dispatch("getUserEmail");
        var postData = {
          uid: firebase.auth().currentUser.uid,
          country: country,
          email: email,
          name: firebase.auth().currentUser.displayName,
        };
        //console.log("Post");
        this.$f7.request.post(
          "https://chatme24.com/statistics/statistics.php",
          postData,
          function (data) {
            //console.log("Load was performed", data);
          }
        );
      }

      // Reset attachments
      self.attachments = [];
      // Hide sheet
      self.sheetVisible = false;
      // Clear area
      self.messagebar.clear();
      // Focus area
      if (text.length) self.messagebar.focus();

      if (self.responseInProgress) {
        //console.log("am here oga");
      }
    },
  },
  created() {
    this.user_uid = firebase.auth().currentUser.uid;
    //let param = decodeURIComponent(this.$f7route.params.group);
    // this.chatgroup = JSON.parse(param);
    this.$store.commit("setShowTabs", false);
    this.$store.dispatch("getGroupMessages");
    this.$store.dispatch("getAppState");
    this.$store.dispatch("getUserStatus");
    //this.$store.dispatch("getTypingMessagesGroup");
    // console.log("hello");
    this.$store.dispatch("statisticsUsersOnline");
    this.$store.dispatch("getTotalGroupMessages");
  },
};
</script>
<style scoped>
.chat-time {
  display: block;
  font-size: 0.6em;
}
</style>