<template>
  <f7-page name="home" @page:beforein="initHome">
    <!-- Top Navbar -->
    <f7-navbar
      title="Following"
      class="navbar color-theme-orange"
      back-link="Back"
    >
      <f7-nav-right> </f7-nav-right>
    </f7-navbar>


    <f7-list class="searchbar-not-found">
      <f7-list-item title="Nothing found"></f7-list-item>
    </f7-list>
    <f7-list class="search-list searchbar-found" media-list>
      <f7-list-item
        v-for="(frd, index) in friendsMatch"
        :key="index"
        :title="frd.name"
        :text="frd.latest_message"
        @click="gotoChat(frd)"
      >
        <f7-badge color="red" slot="after-title" v-if="frd.message_count > 0">{{
          frd.message_count
        }}</f7-badge>

        <img class="small-avatar" slot="media" :src="frd.photo_url1" />
        <span slot="footer" v-if="frd.userStatus == 'online'">
          <font color="green">online</font>
        </span>
        <span slot="footer" v-else>
          <font color="grey">offline</font>
        </span>
        <span slot="subtitle" v-if="frd.location">{{ frd.location }}</span>
        <span slot="after-title" v-if="frd.userType == 2 || frd.userType == 3"
          >Moderator</span
        >
      </f7-list-item>
    </f7-list>

    <f7-popup class="demo-popup-user" backdrop:false>
      <f7-page>
        <f7-navbar
          :title="this.user_details.name"
          :subtitle="this.user_details.location"
        >
          <div slot="default">
            <span :v-if="this.user_details.birthDate">{{
              moment(this.user_details.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.user_details.photo_url" />
          </div>
          <div class="wrapper">
            <p>
              <b>Profile Message</b>
              <br />
              {{ this.user_details.profileMessage }}
            </p>
          </div>
          <div class="wrapper">
            <p>
              <b>Your Email</b>
              <br />
              {{ this.user_details.email }} --> Only you see this
            </p>
          </div>
          <div class="wrapper">
            <p>
              <b>Your Phone Number</b>
              <br />
              {{ this.user_details.phonenumber }} --> Only you see this
            </p>
          </div>
          <br />
          <br />
        </f7-block>
      </f7-page>
    </f7-popup>
  </f7-page>
</template>


<script>
//import firebase from "firebase";
//var numeral = require("numeral");

export default {
  data() {
    return {
      //user_details: null
    };
  },

  methods: {
    sendBroadCast() {
      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) => {
            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 {
              if (index == 1) {
                this.$store.commit("setAlertMessage", "Fields cannot be empty");
              }
            }
          },
          on: {
            open: function () {},
          },
        })
        .open();
    },
    async checkInternet() {
      if (window.hasOwnProperty("cordova")) {
        let network_status = await this.$store.dispatch("checkConnection2");
        if (network_status == "offline") {
          this.$store.commit(
            "setAlertMessage",
            "It seems you are offline. Kindly check internet connection to continue..."
          );
        }
      }
    },
    formatNumber(value) {
      return numeral(value).format("0,0.00"); // displaying other groupings/separators is possible, look at the docs
    },
    logoutApp() {
      const app = this.$f7;
      this.$store.dispatch("signOut");
      this.$f7.popover.close();
      app.panel.close();
    },

    gotoChat(frd) {
      // this.$store.dispatch("getMyFriendsAI");
      var frd_string = JSON.stringify(frd);

      this.$f7router.navigate("/chat/" + encodeURIComponent(frd_string));
    },
    async initHome() {
      this.$store.commit("setShowTabs", true);
      //this.$store.dispatch("getMyFriendsAI");

      var payload = {};
      payload.email = this.user[0].email;
      payload.domain = this.user[0].domain;
      await this.$store.dispatch("getFriendMatch", payload);
      await this.$store.dispatch("getFriendList", payload);
    },
  },

  computed: {
    photoStatus() {
      return this.$store.getters.photoStatus;
    },
    user() {
      return this.$store.getters.user;
    },

    user_country() {
      return this.$store.getters.user_country;
    },
    subscribe_affiliate() {
      return this.$store.getters.subscribe_affiliate;
    },
    user_details() {
      return this.$store.getters.user_details;
    },
    friendsMatch() {
      return this.$store.getters.friendsMatch;
    },
    friend_requests() {
      return this.$store.getters.friend_requests;
    },
    message_count() {
      return this.$store.getters.message_count;
    },
    total_message() {
      return this.$store.getters.total_message;
    },
  },

  async mounted() {
    var payload = {};
    payload.email = this.user[0].email;
    payload.domain = this.user[0].domain;
    //this.$store.dispatch("getTotalMessage",payload);

    //this.$store.dispatch("getFriendMatch", payload);

    //    var photoUpload = await this.$store.dispatch("getUserPhotoStatus", payload);
    //
    //   if (!photoUpload) {
    //    this.$f7router.navigate("/editprofilepicture/", {});
    //   return;
    // }
  },
  watch: {
    photoStatus(value) {
      if (!value) {
        this.$f7router.navigate("/editprofilepicture/", {});
        this.$store.commit(
          "setAlertMessage",
          "Please Upload Profile Picture before chatting with others"
        );
      }
    },
  },

  async created() {
    var dbVersion = 4;
    var response = await this.$store.dispatch("getAppDbVersion");
    //console.log(response);
    if (dbVersion < response) {
      this.$f7router.navigate("/newversion/");
      return;
    }
    var payload = {};
    payload.email = this.user[0].email;
    payload.domain = this.user[0].domain;
    var photoUpload = await this.$store.dispatch("getUserPhotoStatus", payload);

    if (!photoUpload) {
      this.$f7router.navigate("/editprofilepicture/", {});
      return;
    }
    this.checkInternet();
    return;
    //this.$store.dispatch("getMyRequests");

    //    this.$store.dispatch("getMyFriendsAI");
    //  this.$store.dispatch("getTotalMessage");
    //this.$store.dispatch("getUserDetails");
    //this.$store.dispatch("getUserAffiliate");
    //this.$store.dispatch("getUserPayout");
    //this.$store.dispatch("getUserCountry");
    this.$store.dispatch("getAppDbVersion");
    this.$store.dispatch("getAppVersion");

    if (this.myAppVersion < this.app_db_version) {
      this.$store.commit("setAppUpdate", true);
      this.$f7router.navigate("/newversion/");
      return;
    }
  },
};
</script>
<style scoped>
.small-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* Custom color theme */
:root {
  --f7-theme-color: #42a5f5;
  --f7-theme-color-rgb: 66, 165, 245;
  --f7-theme-color-shade: #1b93f3;
  --f7-theme-color-tint: #69b7f7;
}
/* Invert navigation bars to fill style */
:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
}
.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;

  --r: 66;
  --g: 165;
  --b: 245;
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}
.theme-dark .navbar-large-transparent,
.theme-dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}

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

.wrapper {
  text-align: center;
}

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