<template>
  <f7-page name="match" @page:beforein="initHome">
    <!-- Top Navbar -->
    <f7-navbar :sliding="false" large>
      <f7-nav-left>
        <f7-link
          icon-ios="f7:menu"
          icon-aurora="f7:menu"
          icon-md="material:menu"
          panel-open="left"
        ></f7-link>
      </f7-nav-left>

      <f7-nav-title sliding right>Penpal America</f7-nav-title>
      <f7-nav-right> </f7-nav-right>

      <f7-nav-title-large sliding>Penpal America</f7-nav-title-large>
      <f7-subnavbar :inner="false">
        <f7-searchbar
          search-container=".search-list"
          search-in=".item-title"
          :disable-button="!$theme.aurora"
        ></f7-searchbar>
      </f7-subnavbar>
    </f7-navbar>

    <div class="halfcol">
      <f7-button color="green" fill @click="addPhoto"
        >Add Photo/Video</f7-button
      >
      <p style="font-size: 12px">
        Share videos or photo messages. Your video or Photo messages will be
        remove after 24 hours. No nude photos or videos
      </p>
    </div>

    <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 spotLight"
        :key="index"
        :title="frd.name"
        :text="frd.profileMessage"
        @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: {
    async addPhoto() {
      console.log("hello");
      this.$f7router.navigate("/addPhotoVideo/");
    },

    async removeSpotLight() {
      var payload = {};
      payload.email = this.user[0].email;
      payload.domain = this.user[0].domain;
      await this.$store.dispatch("removeSpotLight", payload);
      await this.$store.dispatch("userInSpotLight", payload);
    },
    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: {
    inspotlight() {
      return this.$store.getters.inspotlight;
    },
    photoStatus() {
      return this.$store.getters.photoStatus;
    },
    user() {
      return this.$store.getters.user;
    },
    user_payout: {
      get: function () {
        return this.formatNumber(this.$store.getters.user_payout);
      },
      set: function (newValue) {
        this.$store.commit("setUserLocation", newValue);
      },
    },
    user_country() {
      return this.$store.getters.user_country;
    },
    subscribe_affiliate() {
      return this.$store.getters.subscribe_affiliate;
    },
    user_details() {
      return this.$store.getters.user_details;
    },
    spotLight() {
      return this.$store.getters.spotLight;
    },
    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;
}

@media only screen and (min-width: 650px) and (max-width: 1024px) {
  .halfcol {
    width: 80%;
  }
}

@media only screen and (max-width: 600px) {
  .halfcol {
    margin-top: 20px;
    margin-left: 65px;
    width: 70%;
  }
}

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