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

    <div v-if="!appUpdate" align="center">
      <f7-list media-list>
        <f7-list-item
          swipeout
          v-for="(contact, index) in contacts"
          :key="index"
          :subtitle="contact.name"
          @click="gotoGallery(contact)"
        >
          <img class="imagePicture" slot="title" :src="contact.photo_url1" />
          <span slot="subtitle">
            ,&nbsp;{{ moment(contact.birthDate, "YYYYMMDD").fromNow(true) }}<br
          /></span>
          <span slot="subtitle">{{ contact.location }}<br /></span>
          <span slot="text">{{ contact.profileMessage }}</span>

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

          <f7-row no-gap text-align="center">
            <f7-col>
              <f7-link fill @click="idontlike(contact.email, contact.name)"
                ><f7-icon
                  f7="multiply_circle_fill"
                  color="red"
                  class="f7-icons size-40"
                ></f7-icon
              ></f7-link>
              <br />Don't Like</f7-col
            >
            <f7-col
              ><f7-link fill @click="fans(contact.email, contact.name)"
                ><f7-icon
                  class="f7-icons size-40"
                  f7="heart_circle_fill"
                  color="yellow"
                ></f7-icon></f7-link
              ><br />Follow</f7-col
            >
            <f7-col
              ><f7-link fill @click="ilike(contact.email, contact.name)"
                ><f7-icon
                  class="f7-icons size-40"
                  f7="heart_circle_fill"
                  color="green"
                ></f7-icon></f7-link
              ><br />I Like</f7-col
            >
            <f7-col
              ><f7-link fill @click="reportUser(contact.email, contact.name)"
                ><f7-icon
                  class="f7-icons size-40"
                  f7="drop_fill"
                  color="red"
                ></f7-icon></f7-link
              ><br />
              Report &nbsp;{{ contact.name }}</f7-col
            >
          </f7-row>
        </f7-list-item>
      </f7-list>
    </div>

    <!-- App Update -->
    <div v-else>
      <f7-block>
        <f7-block-title text-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" text-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;
    },

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

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

  methods: {
    reportUser(email_frd, frd_name) {
      const self = this;
      const app = self.$f7;
      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 = email_frd;
              payload.domain = this.user[0].domain;
              payload.userAbuse = response;

              this.$store.dispatch("reportUserToAdmin", payload);
              this.$f7.dialog.close();
              console.log("easy");

              //unmatch the user so that next user can be picked
              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,
              };

              app.request.post(
                "https://penpalamerica.com/penpal/penpalmatchplus.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 missed a match! ${frd_name} picked you as a friend`
                    );
                  }
                }
              );

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

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

                  if (obj[0].email == email_frd) {
                    //try and get another one
                    console.log("this done again3");
                    app.request.post(
                      "https://penpalamerica.com/penpal/userpenpal.php",
                      postData,
                      function (data) {
                        var obj = JSON.parse(data);

                        if (obj[0].email == email_frd) {
                          console.log("this done again2");
                        } else {
                          console.log("this done again");
                          self.$store.commit("setContacts", obj);
                        }
                      }
                    );

                    //end  of try and get another one
                  } else {
                    self.$store.commit("setContacts", obj);
                  }

                  //self.contacts = obj
                }
              ); // end of get another one
            } else {
              if (index == 1) {
                this.$store.commit(
                  "setAlertMessage",
                  "Select Reason for Reporting the user"
                );
              }
            }
          },
          on: {
            open: function () {},
          },
        })
        .open();
    },

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

    ilike(email_frd, frd_name) {
      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/penpalmatch.php",
        postData,
        async function (data) {
          //console.log("data for members", data);
          var obj = JSON.parse(data);

          if (obj[0].response == "0") {
            // not yet a match that is a like
            //But notify the user that he has a like.

            //send an inform him there is a match
            var payload6 = {};
            payload6.email = email_frd;
            payload6.domain = "penpalamerica.com";
            var onesignal_playerID = await self.$store.dispatch(
              "getOnesignalPlayerIDPlus",
              payload6
            );
            //  console.log("onesignal", onesignal_playerID);

            if (onesignal_playerID != null) {
              //console.log("tell me onesignal", onesignal_playerID);
              var params = {};
              params.onesignal_playerID = onesignal_playerID;
              params.message =
                "You have a new like. Please checkout for this pal that likes you";
              self.$store.dispatch("sendNotification", params);
            }
            //send email to user
            //console.log("send email*********");
            var params = {};
            params.email_u = obj[0].email;
            params.email_f = email_frd;
            params.photo_url = obj[0].photo_url1;
            params.friend_name = frd_name;
            params.profileMessage = obj[0].profileMessage;
            params.domain = "penpalamerica.com";
            params.name = obj[0].myname;
            //console.log(params);
            self.$store.dispatch("sendEmailNotificationLike", params);

            //end of send a email

            //get another user

            var postData = {
              email: obj[0].email,
              genderSearch: obj[0].genderSearch,
              name: obj[0].name,
              domain: "penpalamerica.com",
            };

            app.request.post(
              "https://penpalamerica.com/penpal/userpenpal.php",
              postData,
              function (data) {
                // console.log("data for members", data);
                //return;
                var obj = JSON.parse(data);

                self.$store.commit("setContacts", obj);
                //self.contacts = obj;
              }
            );
          } else {
            if (obj[0].response == "1") {
              //wow this is a match
              //send an inform him there is a match
              var payload6 = {};
              payload6.email = email_frd;
              payload6.domain = "penpalamerica.com";
              var onesignal_playerID = await self.$store.dispatch(
                "getOnesignalPlayerIDPlus",
                payload6
              );
              //  console.log("onesignal", onesignal_playerID);

              if (onesignal_playerID != null) {
                //console.log("tell me onesignal", onesignal_playerID);
                var params = {};
                params.onesignal_playerID = onesignal_playerID;
                params.message = "You have a new match with " + obj[0].myname;
                self.$store.dispatch("sendNotification", params);
              }
              //send email to user
              //console.log("send email*********");
              var params = {};
              params.email_u = obj[0].email;
              params.email_f = email_frd;
              params.photo_url = obj[0].photo_url1;
              params.friend_name = frd_name;
              params.profileMessage = obj[0].profileMessage;
              params.domain = "penpalamerica.com";
              params.name = obj[0].myname;
              //console.log(params);
              self.$store.dispatch("sendEmailNotificationMatch", params);

              //end of send a email

              var dialog = app.dialog
                .create({
                  title: "Wow! It is a match!",
                  text: "Send A Message to " + obj[0].name,
                  content:
                    '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input class="dialog-input" type="text" placeholder="Enter Your Message" maxlength="200"></div></div>',

                  buttons: [
                    { text: "Not Now..", close: true },
                    { text: "Submit Message" },
                  ],
                  onClick: (dialog, index) => {
                    var response = dialog.$el
                      .find(".dialog-input")
                      .val()
                      .trim();
                    if (response.length > 0) {
                      self.$store.dispatch("sendMessage", {
                        email_f: email_frd,
                        msg: response,
                        img: null,
                        email_u: my_email,
                        domain: "penpalamerica.com",
                        sentby: my_email,
                      });

                      self.$f7.dialog.close();
                      self.$store.commit("setAlertMessage", "Message Sent.");

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

                      app.request.post(
                        "https://penpalamerica.com/penpal/userpenpal.php",
                        postData,
                        function (data) {
                          var obj = JSON.parse(data);

                          self.$store.commit("setContacts", obj);
                          //self.contacts = obj;
                        }
                      ); //end of getting another penpal
                    } else {
                      if (index == 1) {
                        this.$store.commit(
                          "setAlertMessage",
                          "Empty Message is not allowed"
                        );
                      }
                    }
                  },
                  on: {
                    open: function () {},
                  },
                })
                .open();

              //get another user

              var postData = {
                email: obj[0].email,
                genderSearch: obj[0].genderSearch,
                name: obj[0].name,
                domain: "penpalamerica.com",
              };

              app.request.post(
                "https://penpalamerica.com/penpal/userpenpal.php",
                postData,
                function (data) {
                  var obj = JSON.parse(data);

                  self.$store.commit("setContacts", obj);
                  //self.contacts = obj;
                }
              ); //end of getting another penpal
            } //end of match
          }
        }
      );

      return;
    },

    idontlike(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/penpalmatchplus.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 missed a match! ${frd_name} picked you as a friend`
            );
          }
        }
      );

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

          if (obj[0].email == email_frd) {
            //try and get another one
            console.log("this done again3");
            app.request.post(
              "https://penpalamerica.com/penpal/userpenpal.php",
              postData,
              function (data) {
                var obj = JSON.parse(data);

                if (obj[0].email == email_frd) {
                  console.log("this done again2");
                } else {
                  console.log("this done again");
                  self.$store.commit("setContacts", obj);
                }
              }
            );

            //end  of try and get another one
          } else {
            self.$store.commit("setContacts", obj);
          }

          //self.contacts = obj
        }
      ); // end of get another one
    },

    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/penpalsetfollowing.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 following ${frd_name}. You will not miss any action from ${frd_name} again`
            );

            self.$store.commit("setNoRecordFollowing", false);
          }
        }
      );

      //unmatch the user so that next user can be picked
      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,
      };

      app.request.post(
        "https://penpalamerica.com/penpal/penpalmatchplus.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 missed a match! ${frd_name} picked you as a friend`
            );
          }
        }
      );

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

          if (obj[0].email == email_frd) {
            //try and get another one
            console.log("this done again3");
            app.request.post(
              "https://penpalamerica.com/penpal/userpenpal.php",
              postData,
              function (data) {
                var obj = JSON.parse(data);

                if (obj[0].email == email_frd) {
                  console.log("this done again2");
                } else {
                  console.log("this done again");
                  self.$store.commit("setContacts", obj);
                }
              }
            );

            //end  of try and get another one
          } else {
            self.$store.commit("setContacts", obj);
          }

          //self.contacts = obj
        }
      ); // end of get another one
    },

    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");
    //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;
    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;
    app.request.post(
      "https://penpalamerica.com/penpal/userpenpal.php",
      postData,
      function (data) {
        //console.log("urgent", data);
        var obj = JSON.parse(data);

        self.$store.commit("setContacts", obj);
        //self.contacts = obj;
      }
    );
    //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;
}
.imagePicture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  border: 5px solid #555;
}
</style>