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



    <div v-if="!appUpdate" align="center">
      <div v-if="noRecordFollowers" class="topMargin">
        <h2>No followers Now</h2>
        <p>You don't have any followrs at this time.</p>
      </div>

      <div v-else>
        <f7-list media-list>
          <f7-list-item
            swipeout
            v-for="(following, index) in followers"
            :key="index"
            :subtitle="following.name"
          >
            <img
              class="imagePicture"
              slot="title"
              :src="following.photo_url1"
            />
            <span slot="subtitle">
              ,&nbsp;{{ moment(following.birthDate, "YYYYMMDD").fromNow(true)
              }}<br
            /></span>
            <span slot="subtitle">{{ following.location }}<br /></span>
            <span slot="text">{{ following.profileMessage }}</span>

            <f7-row no-gap align="center">
              <f7-col><b>Fans</b><br />{{ nFormatter(following.fans) }}</f7-col>
              <f7-col><b>Following</b> <br />{{ following.following }}</f7-col>
              <f7-col
                ><b>Philanthropy</b> <br />{{
                  nFormatter(following.gift_out)
                }}</f7-col
              >
              <f7-col
                ><b>Treasure</b> <br />{{
                  nFormatter(following.wallet_backup)
                }}</f7-col
              >
            </f7-row>
            <br />
            <br />

            <f7-row no-gap align="center">
              <f7-col> </f7-col>
              <f7-col
                ><f7-link
                  fill
                  @click="followBack(following.email, following.name)"
                  ><f7-icon
                    class="f7-icons size-40"
                    f7="heart_circle_fill"
                    color="yellow"
                  ></f7-icon></f7-link
                ><br />Follow Back</f7-col
              >

              <f7-col
                ><f7-link fill @click="chatFollower(following)"
                  ><f7-icon
                    class="f7-icons size-40"
                    f7="chat_bubble_text_fill"
                    color="green"
                  ></f7-icon></f7-link
                ><br />Chat</f7-col
              >
              <f7-col>
                <f7-link
                  fill
                  @click="nextFollower(following.email, following.name)"
                  ><f7-icon
                    class="f7-icons size-40"
                    f7=" arrow_right_circle_fill"
                    color="blue"
                  ></f7-icon></f7-link
                ><br />Next
              </f7-col>

              <f7-col></f7-col>
            </f7-row>
          </f7-list-item>
        </f7-list>
      </div>
    </div>
    <!-- end of there is record -->
    <!-- App Update -->
    <div v-else>
      <f7-block>
        <f7-block-title align="center">
          <h1>App Update Available</h1>
        </f7-block-title>
        <f7-row v-if="app_version == 'Android'">
          <f7-col width="100" medium="50">
            <div class="page-content" align="center">
              <h3>Update App from Google Play Member</h3>
              <p>Please click below link to update Penpal America App</p>
              <f7-link
                href="https://play.google.com/store/apps/details?id=com.penpalamerica.penpal"
                external
              >
                <img
                  :src="
                    $device.desktop
                      ? '/images/googleimage.png'
                      : 'file:./images/googleimage.png'
                  "
                  width="50%"
                  height="50%"
                />
              </f7-link>
            </div>
          </f7-col>
        </f7-row>
        <f7-row>
          <f7-col width="100" medium="50">
            <div class="page-content" v-if="app_version == 'iOS'">
              <h3>Update App from App Store</h3>
              <f7-link
                href="https://play.google.com/store/apps/details?id=com.chatme24.chatme24"
                external
              >
                <img
                  :src="
                    $device.desktop
                      ? '/images/appleimage.png'
                      : 'file:/images/appleimage.png'
                  "
                  width="50%"
                />
              </f7-link>
            </div>
          </f7-col>
        </f7-row>
      </f7-block>
    </div>
    <!-- end of app update -->
    |
  </f7-page>
</template>

<script>
import moment from "moment";
import { f7 } from "framework7-vue";
export default {
  data() {
    return {
      moderator: true,
      appState: 1,
      ref: {},
      cursor: null,
      pageSize: 3,
      backPage: false,
      forwardPage: true,
      topPage: false,
      bottomPage: true,
    };
  },

  watch: {
    photoStatus(value) {
      if (!value) {
        this.$f7router.navigate("/editprofilepicture/", {});
      }
    },

    
    lastFollowersEmail(value) {
  
    },


    back_page(value) {
      if (value != null) {
        this.backPage = value;
      }
    },

    forward_page(value) {
      if (value != null) {
        this.forwardPage = value;
      }
    },

    top_page(value) {
      if (value != null) {
        this.topPage = value;
      }
    },

    bottom_page(value) {
      if (value != null) {
        this.bottomPage = value;
      }
    },

    db_reference(value) {
      if (value != null) {
        this.ref = value;
      }
    },
    db_cursor(value) {
      if (value != null) {
        this.cursor = value;
      }
    },
  },

  computed: {

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

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

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

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

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

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

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

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

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

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

    db_reference() {
      this.ref = this.$store.getters.db_reference;
      return this.$store.getters.db_reference;
    },
    db_cursor() {
      return this.$store.getters.db_cursor;
    },
    followers() {
      return this.$store.getters.followers;
    },

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

   

  methods: {
    nFormatter(num) {
      if (num >= 1000000000) {
        return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "G";
      }
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
      }
      if (num >= 1000) {
        return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
      }
      return num;
    },

    async onlineUsers() {
      this.pageSize = await this.$store.dispatch("getUserPageSize");
      var payload = {};
      payload.ref = this.ref;
      payload.cursor = this.cursor;
      payload.pageSize = this.pageSize;
      payload.uid = firebase.auth().currentUser.uid;

      this.$store.dispatch("gotoTopPageOnline", payload);
    },
   async followBack(email_frd, frd_name) {
      //check if you had pick yyou before
      var payload ={}
      payload.email= this.user[0].email
      payload.domain = this.user[0].domain

     
      var my_email = this.user[0].email;
      var postData = {
        email_u: this.user[0].email,
        email_f: email_frd,
        domain:  this.user[0].domain,
      };
      const self = this;
      const app = self.$f7;
      app.request.post(
        "https://penpalamerica.com/penpal/penpalsetfollowers.php",
        postData,
        function (data) {
          //var obj = JSON.parse(data);
          console.log(data);
          if (data == "0") {
            // friend pickme but i did not like
            self.$store.commit(
              "setAlertMessage",
              `Hey, You are now following ${frd_name}. You will not miss any action from ${frd_name} again`
            );

            self.$store.commit("setNoRecordFollowers", false);
          } else {
            console.log(data);
            self.$store.commit(
              "setAlertMessage",
              `Database issue! Sorry you cannnot follow ${frd_name} now. Please try again latter`
            );
          }
        }
      );

      //get another

       await self.$store.dispatch("getFollowers", payload);
    },

    chatFollower(frd) {
      // this.$store.dispatch("getMyFriendsAI");
      frd.user_email = this.user[0].email;
      frd.domain = this.user[0].domain;
      //console.log(frd);
      var frd_string = JSON.stringify(frd);

      //return;

      this.$f7router.navigate("/chat/" + encodeURIComponent(frd_string));
    },

    async nextFollower(email_frd, frd_name) {
      //check if you had pick yyou before

      
      //get another
      var postData = {
        email: this.user[0].email,
        domain:  this.user[0].domain,
      };

      const self = this;
      const app = self.$f7;
      app.request.post(
        "https://penpalamerica.com/penpal/penpalfollowers.php",
        postData,
        function (data) {
          if (data == "#") {
            self.$store.commit("setNoRecordFollowers", true);
          } else {
            var obj = JSON.parse(data);
            if (self.lastFollowersEmail== obj[0].email) {
              self.$store.commit("setAlertMessage", "You just have 1 follower");
            }
            self.$store.commit("setFollowers", obj);
            self.$store.commit("setLastFollowersEmail", obj[0].email);
          }
        }
      );


     
    },

    fans(email_frd, frd_name) {
      //check if you had pick yyou before

      var my_email = this.user[0].email;
      var postData = {
        email_u: this.user[0].email,
        email_f: email_frd,
        domain: "penpalamerica.com",
        name: frd_name,
        genderSearch: this.user[0].genderSearch,
      };
      const self = this;
      const app = self.$f7;
      app.request.post(
        "https://penpalamerica.com/penpal/penpalfans.php",
        postData,
        function (data) {
          //var obj = JSON.parse(data);

          if (data == "0") {
            // friend pickme but i did not like
            self.$store.commit(
              "setAlertMessage",
              `Hey, You are now a fan to ${frd_name}. You will not miss any action from ${frd_name} again`
            );
          }
        }
      );

      //get another
      var postData = {
        email: this.user[0].email,
        genderSearch: this.user[0].genderSearch,
        domain: "penpalamerica.com",
      };

      //const self = this;
      //const app = self.$f7;
      app.request.post(
        "https://penpalamerica.com/penpal/penpalfollowers.php",
        postData,
        function (data) {
          var obj = JSON.parse(data);

          self.$store.commit("setFollowers", obj);
        }
      );
    },

    async checkInternet() {
      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..."
          );
        }
      }
    },
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
    addFrd(frd) {
      var request = {};
      request.sender = firebase.auth().currentUser.uid;
      request.recipient = frd.uid;

      this.$store.dispatch("sendRequest", request);
    },
    gotoGallery(frd) {
      var frd_string = JSON.stringify(frd);
      this.$f7router.navigate("/gallery/" + encodeURIComponent(frd_string));
    },
  },

  async created() {
    var dbVersion = 4;
    var response = await this.$store.dispatch("getAppDbVersion");

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

    if (!photoUpload) {
      this.$f7router.navigate("/editprofilepicture/", {});
      return;
    }
    var postData = {
      email: this.user[0].email,
      genderSearch: this.user[0].genderSearch,
      domain: this.user[0].domain,
    };

    const self = this;
    const app = self.$f7;
    self.$store.commit("setNoRecordFollowers", false);
    app.request.post(
      "https://penpalamerica.com/penpal/penpalfollowers.php",
      postData,
      function (data) {
        if (data == "#") {
          self.$store.commit("setNoRecordFollowers", true);
        } else {
          var obj = JSON.parse(data);

          self.$store.commit("setFollowers", obj);
          self.$store.commit("setLastFollowersEmail", obj[0].email);
        }
      }
    );
    //this.$store.dispatch("getTotalMessage", payload);
    //show dialogue preloader
    //const self = this;
    //f7.dialog.preloader("Loading Members. Please wait...");
    // setTimeout(() => {
    //   f7.dialog.close();
    // }, 2000);
    this.checkInternet();
    //this.pageSize = await this.$store.dispatch("getUserPageSize");

    //this.ref = firebase.database().ref("/users");

    //var payload = {};
    //payload.dbReference = this.ref;
    //payload.pageSize = this.pageSize;
    //payload.uid = firebase.auth().currentUser.uid;
    //this.$store.dispatch("getAllUsersNew", payload);
    //this.$store.dispatch("getAllUsersNew");
    //this.$store.dispatch("getAppDbVersion");
    //this.$store.dispatch("getAppVersion");
    // this.$store.dispatch("getMyRequests");
    // this.$store.dispatch("getMyFriends");
  },
};
</script>

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

.topMargin {
  margin-top: 50px;
}
.imagePicture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  border: 5px solid #555;
}
</style>