<template>
  <div v-if="(friend_email = friend.email)">
    <f7-page @page:beforein="initHome">
      <div v-if="this.friend.userStatus == 'online'">
        <f7-navbar :title="this.friend.name" :subtitle="this.friend.userStatus" back-link="Back">
          <div slot="left">
            <img class="small-avatar2" slot="media" :src="this.friend.photo_url1" @click="gotoGallery(friend)" />
          </div>

          <f7-link popover-open=".popover-menu" slot="right">
            <i class="f7-icons">ellipsis_vertical</i>
          </f7-link>
        </f7-navbar>
      </div>

      <div v-else>
        <f7-navbar :title="this.friend.name" :subtitle="this.friend.userStatus +
          ' ' +
          `${moment(this.friend.lastSeen, 'YYYYMMDD').fromNow()}`
          " back-link="Back">
          <div slot="left">
            <img class="small-avatar2" slot="media" :src="this.friend.photo_url1" @click="gotoGallery(friend)" />
          </div>

          <f7-link popover-open=".popover-menu" slot="right">
            <i class="f7-icons">ellipsis_vertical</i>
          </f7-link>
        </f7-navbar>
      </div>

      <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:paperclip" icon-aurora="f7:Paperclip" icon-md="material:link" 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" :name="message.name" :type="message.type"
            :image="message.image" :avatar="message.avatar" :first="isFirstMessage(message, index)"
            :last="isLastMessage(message, index)" :tail="isTailMessage(message, index)">
            <div v-if="message.type != 'received'" slot="text">
              <div v-if="message.messagedeleted == '1' || message.messagedeleted == '2'
                ">
                <span><i class="f7-icons size-16 color-icon-white"> nosign</i>
                  &nbsp;<i>You deleted this message</i></span>
              </div>
              <div v-else>
                <f7-link class="color-white" @click="
                  gifttemp(
                    message.text,
                    message.sn,
                    message.name,
                    message.smalldate
                  )
                  " popover-open=".popover-menu-reply-delete" slot="right">
                  <span v-if="message.text" v-html="message.text"></span>
                </f7-link>
              </div>
            </div>
            <div v-else slot="text">
              <div v-if="message.messagedeleted == '1'">
                <i class="f7-icons size-16 color-icon-white"> nosign</i>
                <i>This message was deleted</i>
              </div>

              <div v-if="message.messagedeleted == '3'">
                <i class="f7-icons size-16 color-icon-white"> nosign</i>
                <i>This message was deleted by you</i>
              </div>

              <div v-if="message.messagedeleted == '0' || message.messagedeleted == '2'
                ">
                <f7-link class="color-gray" @click="
                  gifttemp2(
                    message.text,
                    message.sn,
                    message.name,
                    message.smalldate
                  )
                  " popover-open=".popover-menu-reply" slot="right">
                  <span v-if="message.text" v-html="message.text"></span>
                </f7-link>
              </div>
            </div>

            <div slot="text" text-align="right">
              <span class="chat-time" v-if="message.read == '2'">
                <div v-if="message.status == '1'">
                  {{ message.smalldate }}
                  <i class="material-icons color-greenyellow size-12">done_all</i>
                </div>
                <div v-else>{{ message.smalldate }}</div>
              </span>

              <span class="chat-time" v-else>
                <div v-if="message.status == '1'">
                  {{ message.smalldate }}
                  <i class="material-icons color-white size-12">done</i>
                </div>
                <div v-else>{{ message.smalldate }}</div>
              </span>
            </div>
          </f7-message>

          <f7-message v-if="friend.email == sent_by &&
            (friend_Details.user_email = received_by) &&
            typing_message == 1
            " type="received" :typing="true" :first="true" :last="true" :tail="true"
            :header="`${friend_Details.name} is typing`" :avatar="friend_Details.photo_url1"></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 == '3'">
        <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-item @click="addModerator(`${friend}`)" popover-close title="Add Moderator"></f7-list-item>
          <f7-list-item @click="removeModerator(`${friend}`)" popover-close title="Remove Moderator"></f7-list-item>
        </f7-list>
      </f7-popover>
      <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">
        <f7-list>
          <!-- <f7-button fill popup-open=".demo-popup">Open Popup</f7-button> -->

          <f7-list-item @click="unMatch(friend.email, friend.name)" popover-close title="Un-Match Friend"></f7-list-item>

          <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-popover class="popover-menu-reply">
        <f7-list>
          <f7-list-item @click="replyMe(giftMessage)" popover-close title="Reply"></f7-list-item>

          <f7-list-item @click="deleteMessageMePlus(deleteSerial)" popover-close
            title="Delete Message for me"></f7-list-item>
        </f7-list>
      </f7-popover>

      <f7-popover class="popover-menu-reply-delete">
        <f7-list>
          <f7-list-item @click="replyMe(giftMessage)" popover-close title="Reply"></f7-list-item>

          <f7-list-item @click="deleteMessage(deleteSerial)" popover-close
            title="Delete Message for everyone"></f7-list-item>

          <f7-list-item @click="deleteMessageMe(deleteSerial)" popover-close title="Delete Message for me"></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_url1" />
            </div>
            <p>
              <b>Status:</b>
              {{ this.friend.userStatus }}<br />

              <span v-if="this.friend.userStatus == 'offline'">
                <b>Lastseen:</b>
                {{ moment(this.friend.lastSeen).fromNow() }} </span><br />

              <b>Profile Message</b>
              <br />
              {{ this.friend.profileMessage }}

              <br /><b>Location</b>
              <br />
              {{ this.friend.location }}
            </p>

            <p>
              UnMatch &nbsp;{{ this.friend.name }}
              <f7-link @click="unMatch(friend.email, friend.name)">
                <f7-icon material="delete" color="blue"></f7-icon>
              </f7-link>
            </p>
          </f7-block>

          <div class="wrapper">
            <p>To place your adverts visit Swift Alliance Limited website</p>
            <f7-link href="https://www.swiftallianceltd.com/" external>Place Advert</f7-link>
          </div>
          <f7-block>
            <f7-row no-gap>
              <f7-col>
                <p v-for="(advert, index) in advert_country" :key="index">
                  <f7-link :href="advert.url" external v-if="index % 2 == 0">
                    <img class="image--cover" :src="advert.image" :alt="advert.alternate" />
                  </f7-link>
                  <span v-if="index % 2 == 0"><br />{{ advert.textMessage }}</span>
                </p>
              </f7-col>

              <f7-col>
                <p v-for="(advert, index) in advert_country" :key="index">
                  <f7-link :href="advert.url" external v-if="index % 2 > 0">
                    <img class="image--cover" :src="advert.image" :alt="advert.alternate" />
                  </f7-link>
                  <span v-if="index % 2 > 0"><br />{{ advert.textMessage }}</span>
                </p>
              </f7-col>
            </f7-row>
          </f7-block>

          <f7-block>
            <f7-row no-gap>
              <f7-col>
                <p v-for="(advert, index) in advert_default" :key="index">
                  <f7-link :href="advert.url" external v-if="index % 2 == 0">
                    <img class="image--cover" :src="advert.image" :alt="advert.alternate" />
                  </f7-link>
                  <span v-if="index % 2 == 0"><br />{{ advert.textMessage }}</span>
                </p>
              </f7-col>

              <f7-col>
                <p v-for="(advert, index) in advert_default" :key="index">
                  <f7-link :href="advert.url" external v-if="index % 2 > 0">
                    <img class="image--cover" :src="advert.image" :alt="advert.alternate" />
                  </f7-link>
                  <span v-if="index % 2 > 0"><br />{{ advert.textMessage }}</span>
                </p>
              </f7-col>
            </f7-row>
          </f7-block>
          <div class="wrapper">
            <p>To place your adverts visit Swift Alliance Limited website</p>
            <f7-link href="https://www.swiftallianceltd.com/" external>Place Advert</f7-link>
          </div>
        </f7-page>
      </f7-popup>
    </f7-page>
  </div>
</template>

<script>
import moment from "moment";
import _ from "lodash";

export default {
  data() {
    return {
      messageText: "",
      username: null,
      textdate: null,
      giftMessage: null,
      deleteSerial: null,
      hold_message: null,
      friend_email: null,
      friend: null,
      friend_Details: null,
      attachments: [],
      sheetVisible: false,
      typingMessage: {},
      responseInProgress: false,
      messagetype: "video",
    };
  },
  computed: {
    replyMessageURL() {
      return this.$store.getters.replyMessageURL;
    },

    replyMessage() {
      return this.$store.getters.replyMessage;
    },

    wallet() {
      return this.$store.getters.wallet;
    },

    user_payout() {
      return this.$store.getters.user_payout;
    },

    gift() {
      return this.$store.getters.gift;
    },

    files() {
      return this.$store.getters.files;
    },
    chatOpen() {
      return this.$store.getters.chatOpen;
    },
    user() {
      return this.$store.getters.user;
    },
    onesignal_playerID() {
      return this.$store.getters.onesignal_playerID;
    },

    advert_default() {
      return this.$store.getters.advert_default;
    },
    advert_country() {
      return this.$store.getters.advert_country;
    },
    sent_by() {
      return this.$store.getters.sent_by;
    },

    received_by() {
      return this.$store.getters.received_by;
    },
    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() {
      //this.hold_message = this.$store.getters.chat_messages;
      return this.$store.getters.chat_messages;
    },

    typing_message() {
      return this.$store.getters.typing_message;
    },

    attachmentsVisible() {
      const self = this;
      return self.attachments.length > 0;
    },
    placeholder() {
      const self = this;
      if (self.replyMessage) {
        return "Message";
      } else {
        return self.attachments.length > 0 ? "Add comment or Send" : "Message";
      }
    },
  },
  beforeDestroy() {
    //this.$store.dispatch("resetMessageCount", this.friend.frd_key);
    var payload3 = {};
    var payload4 = {};
    payload3.email_u = this.user[0].email;
    payload3.email_f = this.friend.email;
    payload3.domain = "penpalamerica.com";

    payload4.email = this.user[0].email;
    payload4.domain = "penpalamerica.com";

    this.$store.dispatch("resetMessageCount", payload3);
    this.$store.dispatch("updateUserStatus", payload4);
  },
  mounted() {
    const self = this;
    self.$f7ready(() => {
      self.messagebar = self.$refs.messagebar.f7Messagebar;
      self.messages = self.$refs.messages.f7Messages;
    });
  },
  watch: {},
  methods: {
    convertURIToImageData(URI) {
      return new Promise(function (resolve, reject) {
        if (URI == null) return reject();
        var canvas = document.createElement("canvas"),
          context = canvas.getContext("2d"),
          image = new Image();
        image.addEventListener(
          "load",
          function () {
            canvas.width = image.width;
            canvas.height = image.height;
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            resolve(context.getImageData(0, 0, canvas.width, canvas.height));
          },
          false
        );
        image.src = URI;
      });
    },
    async replyMe() {
      const app = this.$f7;
      app.popover.close();

      this.$store.commit("setReplyMessage", true);
      var payload = {};
      payload.email = this.user[0].email;
      payload.text = this.giftMessage;
      payload.username = this.username;
      payload.textdate = this.textdate;

      var URL = await this.$store.dispatch("convertTextToImage", payload);
      this.$store.commit("setReplyMessageURL", URL);
      this.attachments.unshift(URL);
    },

    gifttemp(message, serial, name, smalldate) {
      this.giftMessage = message;
      this.deleteSerial = serial;
      this.username = name;
      this.textdate = smalldate;
    },

    gifttemp2(message, serial, name, smalldate) {
      this.giftMessage = message;
      this.deleteSerial = serial;
      this.username = name;
      this.textdate = smalldate;
    },

    giftVenus(gift) {
      var amount = 0;
      var messageout = "";
      if (gift == 1) {
        amount = 100;
        messageout = "Sending Venus Gift to ";
      }

      if (gift == 2) {
        amount = 500;
        messageout = "Sending Mars Gift to ";
      }

      if (gift == 3) {
        amount = 1000;
        messageout = "Sending Jupiter Gift to ";
      }

      //console.log(this.wallet)

      if (this.wallet < amount) {
        //user does not have enough money
        var dialog = this.$f7.dialog
          .create({
            title: "Wallet too low to gift " + this.friend.name,
            text: "Your wallet is too low. Please click TopUp Account to continue",
            content: "",

            buttons: [
              { text: "Cancel", close: true },
              { text: "Topup Account" },
            ],
            onClick: (dialog, index) => {
              if (index == 1) {
                const app = this.$f7;
                this.$f7router.navigate("/pay4me/", {});

                //this.$store.dispatch("sendGiftVenus", payload);
                this.$f7.dialog.close();
                app.panel.close();
              } else {
              }
            },
            on: {
              open: function () {
                //console.log("OPEN");
              },
            },
          })
          .open();
      } else {
        //user has enough money

        var dialog = this.$f7.dialog
          .create({
            title: messageout + this.friend.name,
            text:
              "You are about to send " +
              amount +
              " Points to " +
              this.friend.name +
              ". Please click send to confirm",
            content: "",

            buttons: [{ text: "Cancel", close: true }, { text: "Send" }],
            onClick: (dialog, index) => {
              if (index == 1) {
                const app = this.$f7;
                //var payload = {};
                //payload.profileMessage = response;
                var payload = {};
                payload.email_f = this.friend.email;
                payload.email_u = this.user[0].email;
                payload.domain = this.user[0].domain;
                payload.amount = amount;
                payload.name = this.friend.name;
                this.$store.dispatch("sendGiftVenus", payload);
                this.$f7.dialog.close();
                app.panel.close();
              } else {
              }
            },
            on: {
              open: function () {
                //console.log("OPEN");
              },
            },
          })
          .open();
      }
    },

    deleteMessage(value) {
      const app = this.$f7;
      app.popover.close();
      var dialog = this.$f7.dialog
        .create({
          title: "Delete Message?",
          text: "Do you want to Delete this Message?",
          content: "",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],
          onClick: async (dialog, index) => {
            if (index == 1) {
              //const app = this.$f7;
              //var payload = {};
              //payload.profileMessage = response;
              var payload = {};
              payload.email_f = this.friend.email;
              payload.email_u = this.user[0].email;
              payload.domain = this.user[0].domain;
              payload.message_id = value;
              await this.$store.dispatch("deleteMessage", payload);
              this.$f7.dialog.close();
              app.panel.close();
              //  await this.$store.dispatch("getChatMessagesPromise", payload);
            } else {
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
    },

    deleteMessageMe(value) {
      const app = this.$f7;
      app.popover.close();
      var dialog = this.$f7.dialog
        .create({
          title: "Delete Message?",
          text: "Do you want to Delete this Message?",
          content: "",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],
          onClick: async (dialog, index) => {
            if (index == 1) {
              //const app = this.$f7;
              //var payload = {};
              //payload.profileMessage = response;
              var payload = {};
              payload.email_f = this.friend.email;
              payload.email_u = this.user[0].email;
              payload.domain = this.user[0].domain;
              payload.message_id = value;
              await this.$store.dispatch("deleteMessageMe", payload);
              this.$f7.dialog.close();
              app.panel.close();
              //  await this.$store.dispatch("getChatMessagesPromise", payload);
            } else {
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
    },

    deleteMessageMePlus(value) {
      const app = this.$f7;
      app.popover.close();
      var dialog = this.$f7.dialog
        .create({
          title: "Delete Message?",
          text: "Do you want to Delete this Message?",
          content: "",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],
          onClick: async (dialog, index) => {
            if (index == 1) {
              //const app = this.$f7;
              //var payload = {};
              //payload.profileMessage = response;
              var payload = {};
              payload.email_f = this.friend.email;
              payload.email_u = this.user[0].email;
              payload.domain = this.user[0].domain;
              payload.message_id = value;
              await this.$store.dispatch("deleteMessageMePlus", payload);
              this.$f7.dialog.close();
              app.panel.close();
              //  await this.$store.dispatch("getChatMessagesPromise", payload);
            } else {
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
    },

    gotoGallery(frd) {
      var frd_string = JSON.stringify(frd);
      //console.log(frd);
      this.$f7router.navigate(
        "/viewuserprofile/" + encodeURIComponent(frd_string)
      );
    },
    placeAdvert() {
      //this.$f7router.navigate("https://www.swiftallianceltd.com/");
      var ref = cordova.InAppBrowser.open(
        "http://apache.org",
        "_blank",
        "location=yes"
      );
      var ref = window.open("https://www.swiftallianceltd.com/", "_system");
    },
    unMatch(frd_email, frd_name) {
      this.$f7.dialog.close();
      // app.panel.close();
      this.$f7.popover.close();
      //return;
      var dialog = this.$f7.dialog
        .create({
          title: `Unmatch ${frd_name}?`,
          text: `This will remove ${frd_name} from your friend list and communication between two of you will not be possible again. Please can you confirm you want this?`,
          content: "",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],
          onClick: (dialog, index) => {
            if (index == 1) {
              const app = this.$f7;
              //var payload = {};
              //payload.profileMessage = response;
              var payload = {};
              payload.email_u = this.user[0].email;
              payload.email_f = frd_email;
              payload.domain = this.user[0].domain;

              var response = this.$store.dispatch("unMatchUser", payload);

              this.$f7.dialog.close();
              app.panel.close();
              this.$f7.popover.close();

              this.$store.commit(
                "setAlertMessage",
                "Done. Account Unmatched! Please close the popup."
              );
              //this.$f7router.navigate("/", {});
            } else {
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
    },
    initHome() {
      //this.chatOpen = false;
      //this.$store.commit("setChatOpen", false);
    },

    async refreshTyping() {
      if (this.chatOpen) {
        var payload = {};
        payload.email_u = this.user[0].email;
        payload.email_f = this.friend.email;
        payload.domain = this.user[0].domain;

        this.$store.dispatch("getTypingMessages", payload);
      }
    },
    activeUsers: function (frd_uid) {
      var students = chat_messages;

      var studentGrades = students.filter(
        (student) => student.sentby == "B6CMLDC11DUQVcDzWSKG2OFcIgi2"
      );

      return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
    }, // contains only {Alex: {…}, James: {…}}

    pay4me(frd) {
      var frd_string = JSON.stringify(frd);
      //console.log(frd_string);

      this.$f7router.navigate("/pay4me/" + encodeURIComponent(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) => {
            var response = dialog.$el.find(".dialog-input").val().trim();
            if (
              response == "1" ||
              response == "2" ||
              response == "3" ||
              response == "4"
            ) {
              var payload = {};
              payload.email_u = this.user[0].email;
              payload.email_f = this.friend.email;
              payload.domain = this.user[0].domain;
              payload.userAbuse = response;

              this.$store.dispatch("reportUserToAdmin", payload);
              this.$f7.dialog.close();
            } else {
              if (index == 1) {
                this.$store.commit(
                  "setAlertMessage",
                  "Select Reason for Reporting the user"
                );
              }
            }
          },
          on: {
            open: function () { },
          },
        })
        .open();
    },
    unBlockUser(friend) {
      var payload = {};
      payload.email_u = this.user[0].email;
      payload.email_f = this.friend.email;
      payload.domain = this.user[0].domain;

      this.$store.dispatch("unBlockUser", payload);
      // this.$store.dispatch("checkUserBlocked", this.friend);
      // this.$store.dispatch("checkBlockByFriend", this.friend);
      //this.$store.dispatch("checkUserBlocked", this.friend);
      this.$f7.popover.close();
    },

    blockUser(friend) {
      var payload = {};
      payload.email_u = this.user[0].email;
      payload.email_f = this.friend.email;
      payload.domain = this.user[0].domain;
      this.$store.dispatch("blockUser", payload);
      // this.$store.dispatch("checkUserBlocked", this.friend);
      //this.$store.dispatch("checkBlockByFriend", this.friend);
      this.$f7.popover.close();
    },

    addModerator(friend) {
      this.$store.dispatch("addModerator", this.friend.uid);
      //  this.$store.dispatch("getBanUserStatus", this.friend.uid);

      this.$f7.popover.close();
    },

    removeModerator(friend) {
      this.$store.dispatch("removeModerator", this.friend.uid);
      //  this.$store.dispatch("getBanUserStatus", this.friend.uid);

      this.$f7.popover.close();
    },
    unBanUser(friend) {
      this.$store.dispatch("unBanUser", this.friend.uid);
      this.$store.dispatch("getBanUserStatus", this.friend.uid);

      this.$f7.popover.close();
    },
    async banUser(friend) {
      this.$f7.popover.close();

      var dialog = this.$f7.dialog
        .create({
          title: "Reason for Banning User",
          text: "",
          content:
            '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input class="dialog-input" type="text" placeholder="Enter Reason for Banning"  required validate  maxlength="100"></div></div>',

          buttons: [{ text: "Cancel", close: true }, { text: "Submit" }],
          onClick: (dialog, index) => {
            var response = dialog.$el.find(".dialog-input").val().trim();
            if (response.length != 0) {
              if (response.length < 10) {
                this.$store.commit(
                  "setAlertMessage",
                  "Reason provided too short..."
                );
                return;
              }

              var payload = {};
              payload.uid = this.friend.uid;
              payload.comments = response;
              //this.$store.dispatch("banUser", this.friend.uid);
              this.$store.dispatch("banUser", payload);
              this.$store.dispatch("getBanUserStatus", this.friend.uid);
              this.$store.commit("setAlertMessage", "User has been banned");

              //update database

              var postData = {
                uid: this.friend.uid,
                comments: response,
              };

              this.$f7.request.post(
                "https://chatme24.com/statistics/banuser.php",
                postData,
                function (data) { }
              );
            } else {
              if (index == 1) {
                this.$store.commit(
                  "setAlertMessage",
                  "Provide Reason for Banning the user"
                );
              }
            }
          },
          on: {
            open: function () { },
          },
        })
        .open();
    },

    async gotoKeyDown(friend) {
      var payload = {};
      payload.email_u = this.user[0].email;
      payload.email_f = this.friend.email;
      payload.domain = this.user[0].domain;
      await this.$store.dispatch("sendDownTypingMessage", payload);
      this.$store.dispatch("getTypingMessages", payload);
    },
    gotoKeyUp(friend) {
      var payload = {};
      payload.email_u = this.user[0].email;
      payload.email_f = this.friend.email;
      payload.domain = this.user[0].domain;

      setTimeout(async () => {
        //await this.$store.dispatch("sendUpTypingMessage", payload);
        this.$store.dispatch("getTypingMessages", payload);
      }, 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
      self.$store.commit("setReplyMessage", false);
    },
    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() {
      //check if your has been blocked for sending message:

      var params = {};
      params.email_u = this.user[0].email;
      params.email = this.user[0].email;
      params.email_f = this.friend.email;
      params.domain = this.friend.domain;
      params.amount = 1.0;
      var paramsMessageType = params
      this.$store.dispatch("getWallet", params);
      var response = await this.$store.dispatch("checkUserBlocked", params);

      if (response == "1") {
        this.$store.commit(
          "setAlertMessage",
          "You have blocked the user, please unblock the user before sending message..."
        );

        return;
      }

      if (response == "2") {
        this.$store.commit(
          "setAlertMessage",
          "You have been blocked by this user"
        );

        return;
      }

      var response = await this.$store.dispatch("checkUserUnmatch", params);

      if (response == "1") {
        this.$store.commit(
          "setAlertMessage",
          "This account has been unmatched and messages cannot be sent to it..."
        );

        return;
      }

      if (response == "2") {
        this.$store.commit(
          "setAlertMessage",
          "This account has been unmatched and messages cannot be sent to it..."
        );

        return;
      }

      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;
        }
      }

      if (this.onesignal_playerID != null) {
        var params = {};
        params.onesignal_playerID = this.onesignal_playerID;
        params.message = "You have a new message from " + this.user[0].name;
        params.photo_url1 = this.user[0].photo_url1;
        await this.$store.dispatch("sendNotificationPlus", params);
      } else {
        //send email to user
        //console.log("send email*********");
        var params = {};
        params.email_u = this.user[0].email;
        params.email_f = this.friend.email;
        params.photo_url = this.user[0].photo_url1;
        params.friend_name = this.friend.name;
        params.profileMessage = this.user[0].profileMessage;
        params.domain = this.friend.domain;
        params.name = this.user[0].name;
        // console.log(params);
        await this.$store.dispatch("sendEmailNotification", params);
      }

      //      await this.$store.dispatch("getUserStatus");
      //      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;
      }



      //**** check if message is a reply to a message or fresh message*/

      var messageType = await this.$store.dispatch("checkMessageType", paramsMessageType);
      var amount = 1.0;
      if (messageType == "Sender") {
        //console.log("Sender")
        //check if user has enough point for the chat

         //console.log("wallet amount",this.wallet)

        if (this.wallet < amount) {
          //user does not have enough money
          var dialog = this.$f7.dialog
            .create({
              title: "Wallet too low to send message to " + this.friend.name,
              text: "Your wallet is too low. Please click TopUp Account to continue",
              content: "",

              buttons: [
                { text: "Cancel", close: true },
                { text: "Topup Account" },
              ],
              onClick: (dialog, index) => {
                if (index == 1) {
                  const app = this.$f7;
                  this.$f7router.navigate("/pay4me/", {});

                  //this.$store.dispatch("sendGiftVenus", payload);
                  this.$f7.dialog.close();
                  app.panel.close();
                } else {
                }
              },
              on: {
                open: function () {
                  //console.log("OPEN");
                },
              },
            })
            .open();
          return
        } else {
          //  the user has enough money
          var chargeStatus = await this.$store.dispatch("chargeUser", paramsMessageType);
          if (chargeStatus != "0") {
            //user could not be charged

            this.$store.commit(
              "setAlertMessage",
              "Sorry, we cannot charge you this time. Please try again or report to Admin"
            );

            return
          }


        }
      }







      //***** end of charging user



      if (self.attachments.length > 0) {
        //console.log(this.replyMessage);
        //console.log(this.replyMessageURL);
        if (this.replyMessage && this.replyMessageURL != null) {
         await self.$store.dispatch("sendMessage", {
            email_f: self.friend.email,
            msg: text,
            img: this.replyMessageURL,
            email_u: self.friend.user_email,
            domain: self.friend.domain,
            sentby: self.friend.user_email,
            messageType:messageType
          });
          this.$store.commit("setReplyMessage", false);
        } else {
          _.forEach(self.files, (attachment) => {
            self.$store
              .dispatch("uploadImageMySQLChat", attachment)
              .then((url) => {
                //console.log("url", url);
                self.$store.dispatch("sendMessage", {
                  email_f: self.friend.email,
                  msg: text,
                  img: url,
                  email_u: self.friend.user_email,
                  domain: self.friend.domain,
                  sentby: self.friend.user_email,
                  messageType:messageType
                });
              });
          });
        }
      } else {
        await self.$store.dispatch("sendMessage", {
          email_f: self.friend.email,
          msg: text,
          img: null,
          email_u: self.friend.user_email,
          domain: self.friend.domain,
          sentby: self.friend.user_email,
          messageType:messageType
        });
      }

      
      if (messageType == "Reply") {
          //console.log("Receiver")
          //pay the user for replying the message

          var payoutStatus =await this.$store.dispatch("payUser", paramsMessageType);

          if( payoutStatus !=0 ){

            this.$store.commit(
              "setAlertMessage",
              "Sorry, we could not pay you for replying to this chat. Please report it to Admin"
            );

          }

      }

      //var payload2 = {};
      //payload2.email_u = self.friend.user_email;
      //payload2.email_f = self.friend.email;
      //payload2.domain = "penpalamerica.com";
      //await this.$store.dispatch("getChatMessages", payload2);

      // Reset attachments
      self.attachments = [];
      // Hide sheet
      self.sheetVisible = false;
      // Clear area
      self.messagebar.clear();

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

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

  created() {
    // console.log("nosa");
    // this.$store.commit("setChatMessages", []);
    this.$store.commit("setChatOpen", true);

    let param = this.$f7route.params.frd; // decodeURIComponent(this.$f7route.params.frd);

    //console.log(param);

    this.friend = JSON.parse(param);
    this.friend_Details = this.friend;

    this.friend_email = this.friend.email;

    var payload = {};
    payload.email = this.user[0].email;
    payload.domain = this.user[0].domain;
    this.$store.dispatch("getUserPersonalDetails", payload);
    this.$store.commit("setShowTabs", false);
    // this.$store.dispatch("setUser", false);
    var payload1 = {};
    payload1.email_u = this.user[0].email;
    payload1.email = this.friend.email;
    payload1.domain = this.user[0].domain;
    this.$store.dispatch("getOnesignalPlayerID", payload1);
    payload.email_u = this.user[0].email;
    payload.email_f = this.friend.email;
    payload.domain = this.user[0].domain;
    this.$store.dispatch("getChatMessages", payload);
    this.$store.dispatch("getWallet", payload);

    //this.$store.dispatch("resetMessageCount", payload1);
    // setInterval(this.refreshChats, 10000);

    setInterval(this.refreshTyping, 5000);
    // this.$store.dispatch("getAdvertDefault");

    //  this.$store.dispatch("updateReadMessage", this.friend);
    //  //this.$store.dispatch("resetMessageCount", this.friend);
    //  this.$store.dispatch("resetMessageCount", this.friend.frd_key);
    //  this.$store.dispatch("getTypingMessages", this.friend);
    //  this.$store.dispatch("getUserStatus");

    //  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.$store.dispatch("getOnesignalPlayerID", this.friend.uid);
    //  this.friend_uid = this.friend.uid;
    //  this.$store.dispatch("getAdvertCountry");
  },
};
</script>

<style scoped>
.size-16 {
  font-size: 16px;
}

.size-12 {
  font-size: 12px;
}

.color-greenyellow {
  color: greenyellow;
}

.color-deeppurple {
  color: #673ab7;
}

.color-white {
  color: white;
}

.color-gray {
  color: gray;
}

.color-lime {
  color: lime;
}

.color-teal {
  color: teal;
}

.format_menu {
  padding-right: 2px;
  font-size: 14px;
}

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

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

.wrapper {
  text-align: center;
  margin: 20px;
}

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

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

.image--cover {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.halfcol {
  width: 10%;
  margin-left: 580px;
}

@media only screen and (max-width: 600px) {
  .halfcol {
    width: 50%;
    margin-left: 100px;
    margin-bottom: 20px;
  }
}
</style>