<template>
  <div v-if="this.friend_uid == this.friend.uid">
    <f7-page>
      <f7-navbar :title="this.friend.name" :subtitle="this.friend.userStatus" back-link="Back">
        <div slot="default">
          <f7-link fill popup-open=".demo-popup">
            <img class="small-avatar2" slot="media" :src="this.friend.photo_url" />
          </f7-link>
        </div>
        <div slot="default">
          <span :v-if="this.friend.location">{{this.friend.location}}</span>
        </div>

        <f7-nav-right>
          <div v-if="this.subscribe_affiliate_friend">
            <f7-link @click="pay4me(friend)">Pay4Me</f7-link>
          </div>
          <span v-if="ban_status">
            <f7-badge color="red">Banned</f7-badge>
          </span>
          <f7-link popover-open=".popover-menu">
            <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"
        @keydown.native="gotoKeyDown(friend)"
        @keyup.native="gotoKeyUp(friend)"
      >
        <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 chat_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.name"
            :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=='1'"
            type="received"
            :typing="true"
            :first="true"
            :last="true"
            :tail="true"
            :header="`${friend_Details.name} is typing`"
            :avatar="friend_Details.photo_url"
          ></f7-message>
        </div>
      </f7-messages>
      <input type="file" ref="file" style="display:none;" @change="onFilePicked" multiple />
      <f7-popover class="popover-menu" v-if="user_status=='2'">
        <f7-list>
          <f7-list-item @click="blockUser(`${friend}`)" popover-close title="Block User"></f7-list-item>
          <f7-list-item @click="unBlockUser(`${friend}`)" popover-close title="Unblock User"></f7-list-item>
          <f7-list-item @click="reportUser(`${friend}`)" popover-close title="Report User"></f7-list-item>
          <f7-list-item @click="banUser(`${friend}`)" popover-close title="Ban User"></f7-list-item>
          <f7-list-item @click="unBanUser(`${friend}`)" popover-close title="Un-Ban User"></f7-list-item>
        </f7-list>
      </f7-popover>
      <f7-popover class="popover-menu" v-else>
        <f7-list>
          <!-- <f7-button fill popup-open=".demo-popup">Open Popup</f7-button> -->

          <f7-list-item @click="blockUser(`${friend}`)" popover-close title="Block User"></f7-list-item>
          <f7-list-item @click="unBlockUser(`${friend}`)" popover-close title="Unblock User"></f7-list-item>
          <f7-list-item @click="reportUser(`${friend}`)" popover-close title="Report User"></f7-list-item>
        </f7-list>
      </f7-popover>

      <f7-popup class="demo-popup">
        <f7-page>
          <f7-navbar :title="this.friend.name" :subtitle="this.friend.location">
            <div slot="default">
              <span
                :v-if="this.friend.birthDate"
              >{{moment(this.friend.birthDate,"YYYYMMDD").fromNow(true)}}</span>
            </div>
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>
            <div class="wrapper">
              <img class="image--cover1" :src="this.friend.photo_url" />
            </div>
            <div class="wrapper">
              <p>
                <b>Profile Message</b>
                <br />
                {{this.friend.profileMessage}}
              </p>
            </div>
            <div class="wrapper">
              <p>
                <b>Status:</b>
                {{this.friend.userStatus}}
              </p>
            </div>
            <div class="wrapper">
              <span v-if="this.friend.userStatus=='offline'">
                <b>Lastseen:</b>
                {{moment(this.friend.lastSeen).fromNow() }}
              </span>
            </div>

            <div slot="default">
              <span :v-if="this.block_by_friend=='1'">Blocked By Friend</span>
            </div>
            <div slot="default">
              <span :v-if="this.friend_status=='1'">Blocked By you</span>
            </div>
          </f7-block>
        </f7-page>
      </f7-popup>
    </f7-page>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      friend: null,
      friend_Details: null,
      attachments: [],
      sheetVisible: false,
      typingMessage: {},
      responseInProgress: false,
      friend_uid: null
    };
  },
  computed: {
    subscribe_affiliate_friend() {
      return this.$store.getters.subscribe_affiliate_friend;
    },
    block_by_friend() {
      return this.$store.getters.block_by_friend;
    },
    friend_status() {
      return this.$store.getters.friend_status;
    },
    ban_status() {
      return this.$store.getters.ban_status;
    },
    user_status() {
      return this.$store.getters.user_status;
    },
    images() {
      return this.$store.getters.images;
    },
    chat_messages() {
      //console.log("message routine");
      return this.$store.getters.chat_messages;
    },

    typing_message() {
      // console.log("am called");
      return this.$store.getters.typing_message;
    },

    attachmentsVisible() {
      const self = this;
      return self.attachments.length > 0;
    },
    placeholder() {
      const self = this;
      return self.attachments.length > 0 ? "Add comment or Send" : "Message";
    }
  },
  beforeDestroy() {
    //console.log("Yes man");
    this.$store.dispatch("resetMessageCount", this.friend);
  },
  mounted() {
    const self = this;
    self.$f7ready(() => {
      self.messagebar = self.$refs.messagebar.f7Messagebar;
      self.messages = self.$refs.messages.f7Messages;
    });
    // console.log("mounted");
    //this.$store.dispatch("getTypingMessages", this.friend);
    //this.$store.dispatch("getTypingMessages", this.friend_Details);
  },
  watch: {
    typing_message(value) {
      // console.log("watch", value);
    }
  },
  methods: {
    //profileDetails(friend) {
    //console.log("am here");
    // this.$f7.popup.open();
    // this.$f7.popover.close();
    //},
    pay4me(frd) {
      var frd_string = JSON.stringify(frd);
      //console.log("Nosa I am here pay4me" + frd_string);
      this.$f7router.navigate("/pay4me/" + encodeURIComponent(frd_string));
      //console.log("Nosa I am here " + frd_string);
    },
    reportUser() {
      this.$f7.popover.close();
      var dialog = this.$f7.dialog
        .create({
          title: "Reason for Reporting",
          text:
            "1. Sending nude pictures<br>2. Abusive language<br>3. Indecent conversation<br>4. Others",
          content:
            '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input class="dialog-input" type="tel" placeholder="Enter number"  required validate pattern="[1-4]*" data-error-message="Only numbers from 1 to 4" maxlength="1"></div></div>',

          buttons: [{ text: "Cancel", close: true }, { text: "Ok" }],
          onClick: (dialog, index) => {
            //console.log("nosa");
            //console.log(dialog.$el.find(".dialog-input").val());
            var response = dialog.$el
              .find(".dialog-input")
              .val()
              .trim();
            if (
              response == "1" ||
              response == "2" ||
              response == "3" ||
              response == "4"
            ) {
              var payload = {};
              payload.uid = this.friend.uid;
              payload.report_id = response;
              payload.frd_key = this.friend.frd_key;
              // console.log("payload.uid", payload.uid);
              // console.log("payload.report_id", payload.report_id);
              this.$store.dispatch("reportUserToAdmin", payload);
              this.$f7.dialog.close();
            } else {
              //console.log("response", response);
              if (index == 1) {
                this.$store.commit(
                  "setAlertMessage",
                  "Select Reason for Reporting the user"
                );
              }
            }
          },
          on: {
            open: function() {
              //console.log("OPEN");
            }
          }
        })
        .open();
    },
    unBlockUser(friend) {
      //console.log(JSON.stringify(this.friend.frd_key));
      this.$store.dispatch("unBlockUser", this.friend);
      this.$store.dispatch("checkUserBlocked", this.friend);
      this.$store.dispatch("checkBlockByFriend", this.friend);
      //this.$store.dispatch("checkUserBlocked", this.friend);
      this.$f7.popover.close();
    },

    blockUser(friend) {
      //console.log(JSON.stringify(this.friend.frd_key));
      this.$store.dispatch("blockUser", this.friend);
      this.$store.dispatch("checkUserBlocked", this.friend);
      this.$store.dispatch("checkBlockByFriend", this.friend);
      this.$f7.popover.close();
    },

    unBanUser(friend) {
      // console.log(JSON.stringify(this.friend.uid));
      this.$store.dispatch("unBanUser", this.friend.uid);
      this.$store.dispatch("getBanUserStatus", this.friend.uid);
      //console.log("banuser routine");
      this.$f7.popover.close();
    },
    banUser(friend) {
      // console.log(JSON.stringify(this.friend.uid));
      this.$store.dispatch("banUser", this.friend.uid);
      this.$store.dispatch("getBanUserStatus", this.friend.uid);
      //console.log("banuser routine");
      this.$f7.popover.close();
    },

    gotoKeyDown(friend) {
      //console.log("key down seeee mee ao ", JSON.stringify(this.friend));
      this.$store.dispatch("sendDownTypingMessage", this.friend_Details);
      this.$store.dispatch("getTypingMessages", this.friend);
    },
    gotoKeyUp(friend) {
      // console.log("seeee mee ao up ");
      //this.$store.commit("setTypingMessage", false);
      setTimeout(() => {
        this.$store.dispatch("sendUpTypingMessage", this.friend_Details);
        this.$store.dispatch("getTypingMessages", this.friend);
        // console.log("resetTypingMessageGroup2");
      }, 3000);
    },

    launchFilePicker() {
      this.$refs.file.click();
    },
    onFilePicked() {
      this.$store.dispatch("readFileMessage");
    },
    isFirstMessage(message, index) {
      const self = this;
      const previousMessage = self.chat_messages[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.chat_messages[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.chat_messages[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);
      }
    },

    sendMessage() {
      this.$store.dispatch("checkUserBlocked", this.friend);
      //console.log("status", this.friend_status);
      if (this.friend_status == "1") {
        this.$store.commit(
          "setAlertMessage",
          "You have blocked the user, please unblock the user before sending message..."
        );

        return;
      }

      this.$store.dispatch("checkBlockByFriend", this.friend);
      //console.log("block_by_friend", this.block_by_friend);
      if (this.block_by_friend == "1") {
        this.$store.commit(
          "setAlertMessage",
          "You have been blocked by this user"
        );

        return;
      }

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

        return;
      }
      //console.log("I am here");
      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 => {
            self.$store.dispatch("sendMessage", {
              friend: self.friend,
              msg: text,
              img: url
            });
          });
        });
      } else {
        self.$store.dispatch("sendMessage", {
          friend: self.friend,
          msg: text,
          img: null
        });
      }
      // Reset attachments
      self.attachments = [];
      // Hide sheet
      self.sheetVisible = false;
      // Clear area
      self.messagebar.clear();

      // Focus area
      if (text.length > 0) self.messagebar.focus();
    },

    resetTypingMessage() {
      //console.log("coronavirus");
      var self = this;
      setTimeout(() => {
        self.$store.dispatch("sendUpTypingMessage", self.friend_Details);
        //console.log("coronavirus2");
      }, 4000);
      //}
    }
  },

  created() {
    let param = this.$f7route.params.frd; // decodeURIComponent(this.$f7route.params.frd);
    this.friend = JSON.parse(param);
    this.friend_Details = this.friend;
    this.$store.commit("setShowTabs", false);
    this.$store.dispatch("getChatMessages", this.friend);
    //console.log(JSON.stringify(this.friend));
    this.$store.dispatch("resetMessageCount", this.friend);
    this.$store.dispatch("getTypingMessages", this.friend);
    this.$store.dispatch("getUserStatus");
    //console.log("database called");
    this.$store.dispatch("getBanUserStatus", this.friend.uid);
    this.$store.dispatch("checkBlockByFriend", this.friend);
    this.$store.dispatch("checkUserBlocked", this.friend);
    this.$store.dispatch("getFriendAffiliate", this.friend.uid);
    this.friend_uid = this.friend.uid;
  }
};
</script>

<style scoped>
.chat-time {
  display: block;
  font-size: 0.6em;
  margin-top: 3px;
}

.small-avatar2 {
  width: 50px;
  height: 50px;
  margin: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.wrapper {
  text-align: center;
}

.image--cover1 {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  margin: 20px;
  object-fit: cover;
  object-position: center;
}
</style>>