<template>
    <f7-page name="home" @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>
        <diV class="format_menu">
          
          <p>Payout<br />${{Number(user_payout).toLocaleString() }}</p>
        </diV>

        <diV class="format_menu">
          <p>
            Gifts <br />
            {{nFormatter( gift)}}
          </p>
        </diV>

        <diV class="format_menu">
          <p>Wallet<br />{{nFormatter( wallet)}}</p>
        </diV>

        <f7-icon f7="bell" slot="right" v-if="total_message > 0">
          <f7-badge color="red">{{ total_message }}</f7-badge>
        </f7-icon>

        <f7-icon f7="bell" slot="right" v-if="total_notify > 0">
          <f7-badge color="yellow">{{ total_notify }}</f7-badge>
        </f7-icon>
        <f7-link popover-open=".popover-menu" slot="right">
          <i class="f7-icons">ellipsis_vertical</i>
        </f7-link>
      </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>


    <p style="font-size: 10px;text-align:center" >Fans who have recharged their accounts are shown here. You cannot see yourself even when you have recharged but others can.</p>
    <div v-if="!appUpdate" align="center">
      <div v-if="noRecordElite" class="topMargin">
        <h2>No Elites For Now</h2>
      </div>

      <div v-else>
        <f7-list media-list>
          <f7-list-item
            swipeout
            v-for="(following, index) in elites"
            :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-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-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/", {});
      }
    },

    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;
    },
    lastEliteEmail() {
      return this.$store.getters.lastEliteEmail;
    },

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

    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;
    },
    elites() {
      return this.$store.getters.elites;
    },

    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);
    },
    followBack(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",
      };
      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("setNoRecordElite", false);
          } else {
            console.log(data);
            self.$store.commit(
              "setAlertMessage",
              `Database issue! Sorry you cannnot follow ${frd_name} now. Please try again latter`
            );
          }
        }
      );

      //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/penpalelites.php",
        postData,
        function (data) {
          if (data == "#") {
            self.$store.commit("setNoRecordElite", true);
          } else {
            var obj = JSON.parse(data);
            self.$store.commit("setElites", obj);
            self.$store.commit("setNoRecordElite", false);
          }
        }
      );
    },

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

    nextFollower(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;

      //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/penpalelites.php",
        postData,
        function (data) {
            
          if (data == "#") {
            self.$store.commit("setNoRecordElite", true);
          } else {
            var obj = JSON.parse(data);
            if (self.lastEliteEmail == obj[0].email) {
              self.$store.commit("setAlertMessage", "We just have 1 Elite");
            }
            self.$store.commit("setElites", obj);
            self.$store.commit("setLastEliteEmail", obj[0].email);
            self.$store.commit("setNoRecordElite", false);
          }
        }
      );
    },

    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/penpalelites.php",
        postData,
        function (data) {
          var obj = JSON.parse(data);

        if (data == "#") {
          self.$store.commit("setNoRecordElite", true);
        } else {
          var obj = JSON.parse(data);

          self.$store.commit("setElites", obj);
          self.$store.commit("setLastEliteEmail", obj[0].email);
           self.$store.commit("setNoRecordElite", false);
        }
        }
      );
    },

    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("setNoRecordElite", false);
    app.request.post(
      "https://penpalamerica.com/penpal/penpalelites.php",
      postData,
      function (data) {
         // console.log(data)
        if (data == "#") {
          self.$store.commit("setNoRecordElite", true);
        } else {
          var obj = JSON.parse(data);

          self.$store.commit("setElites", obj);
          self.$store.commit("setLastEliteEmail", obj[0].email);
           self.$store.commit("setNoRecordElite", false);
        }
      }
    );
    //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>