<template>
  <f7-page name="about">
    <f7-navbar
      :title="this.friend.name"
      :subtitle="this.friend.userStatus"
      back-link="Back"
    >
      <div slot="left">
        <f7-link fill popup-open=".demo-popup">
          <img
            class="small-avatar2"
            slot="media"
            :src="this.friend.photo_url1"
          />
        </f7-link>
      </div>

      <f7-nav-right> </f7-nav-right>
    </f7-navbar>
    <div v-if="!videofile" align="center">
      <f7-list media-list>
        <f7-list-item
          swipeout
          v-for="(contact, index) in contacts"
          :key="index"
          :subtitle="contact.name"
        >
          <img class="imagePicture" slot="title" :src="photo_url" />
          <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 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-list-item>

        <f7-block>
          <f7-row gap>
            <f7-col></f7-col>
            <f7-col v-if="friend.photo_number > 1">
              <f7-button fill @click="nextPicture">Next</f7-button>
            </f7-col>

            <span v-else> Press Back Button to continue </span>
            <f7-col> </f7-col>
          </f7-row>
        </f7-block>
      </f7-list>
    </div>

    <div v-else id="video">
      <Media
        :kind="'video'"
        :muted="true"
        :src="photo_url"
        :autoplay="true"
        :controls="true"
        :loop="true"
        :ref="'fish'"
        :style="{ width: '100%' }"
        @pause="handle()"
      >
      </Media>

      <f7-block>
        <f7-row gap>
          <f7-col></f7-col>
          <f7-col v-if="friend.photo_number > 0">
            <f7-button fill @click="nextPicture">Next</f7-button>
          </f7-col>

          <f7-col> </f7-col>
        </f7-row>
      </f7-block>
    </div>

    |
  </f7-page>
</template>

<script>
import firebase from "firebase";
import Media from "@dongido/vue-viaudio";
import moment from "moment";
import { f7 } from "framework7-vue";
export default {
  name: "app",
  components: {
    Media,
  },
  data() {
    return {
      last_photo: null,
      moderator: true,
      appState: 1,
      ref: {},
      cursor: null,
      pageSize: 3,
      backPage: false,
      forwardPage: true,
      topPage: false,
      bottomPage: true,
      photo_url: null,
      photo_state: 0,
      videofile: false,
    };
  },
  watch: {
    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;
        //console.log("value", value);
      }
      //console.log("value", value);
    },
    db_cursor(value) {
      if (value != null) {
        this.cursor = value;
        // console.log("value", value);
      }
    },
  },

  computed: {
    appUpdate() {
      return this.$store.getters.appUpdate;
    },
    top_page() {
      //console.log("top", this.$store.getters.top_page);
      return this.$store.getters.top_page;
    },
    bottom_page() {
      return this.$store.getters.bottom_page;
    },

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

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


    nextPicture() {
      this.photo_state++;
      this.videofile = false;
      //  console.log(this.photo_state);
      // console.log(" ", this.friend.photo_number);
      if (this.photo_state <= this.friend.photo_number) {
        if (this.photo_state == 1) {
          this.photo_url = this.friend.photo_url1;
          this.last_photo = this.friend.photo_url1;
          //console.log(filename);
          // console.log("ext", filename.split(".").pop());
        }

        if (this.photo_state == 2) {
          var need_photo = true;
          if (
            this.friend.photo_url2 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url2
          ) {
            this.photo_url = this.friend.photo_url2;
            this.last_photo = this.friend.photo_url2;
            need_photo = false;
          }

          if (
            this.friend.photo_url3 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url3
          ) {
            this.photo_url = this.friend.photo_url3;
            this.last_photo = this.friend.photo_url3;
            need_photo = false;
          }

          if (
            this.friend.photo_url4 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url4
          ) {
            this.photo_url = this.friend.photo_url4;
            this.last_photo = this.friend.photo_url4;
            need_photo = false;
          }

          if (
            this.friend.photo_url5 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url5
          ) {
            this.photo_url = this.friend.photo_url5;
            this.last_photo = this.friend.photo_url5;
            this.videofile = true;
            need_photo = false;
          }

          if (
            this.friend.photo_url6 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url6
          ) {
            this.photo_url = this.friend.photo_url6;
            this.last_photo = this.friend.photo_url6;
            this.videofile = true;
            need_photo = false;
          }
        } //end of state 2

        if (this.photo_state == 3) {
          var need_photo = true;
          if (
            this.friend.photo_url3 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url3
          ) {
            this.photo_url = this.friend.photo_url3;
            this.last_photo = this.friend.photo_url3;
            need_photo = false;
          }

          if (
            this.friend.photo_url4 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url4
          ) {
            this.photo_url = this.friend.photo_url4;
            this.last_photo = this.friend.photo_url4;
            need_photo = false;
          }

          if (
            this.friend.photo_url5 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url5
          ) {
            this.photo_url = this.friend.photo_url5;
            this.last_photo = this.friend.photo_url5;
            this.videofile = true;
            need_photo = false;
          }

          if (
            this.friend.photo_url6 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url6
          ) {
            this.last_photo = this.friend.photo_url6;
            this.photo_url = this.friend.photo_url6;
            this.videofile = true;
            need_photo = false;
        
          }

          if (
            this.friend.photo_url2 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url2
          ) {
            this.last_photo = this.friend.photo_url2;
            this.photo_url = this.friend.photo_url2;
            need_photo = false;
          }
        } //end of state 3

        if (this.photo_state == 4) {
          var need_photo = true;
          if (
            this.friend.photo_url4 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url4
          ) {
            this.photo_url = this.friend.photo_url4;
            this.last_photo = this.friend.photo_url4;
            need_photo = false;
          }

          if (
            this.friend.photo_url5 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url5
          ) {
            this.photo_url = this.friend.photo_url5;
            this.last_photo = this.friend.photo_url5;
            this.videofile = true;
            need_photo = false;
          }

          if (
            this.friend.photo_url6 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url6
          ) {
            this.photo_url = this.friend.photo_url6;
            this.last_photo = this.friend.photo_url6;
            this.videofile = true;
            need_photo = false;
          }

          if (
            this.friend.photo_url2 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url2
          ) {
            this.last_photo = this.friend.photo_url2;
            this.photo_url = this.friend.photo_url2;
            need_photo = false;
          }

          if (
            this.friend.photo_url3 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url3
          ) {
            this.last_photo = this.friend.photo_url3;
            this.photo_url = this.friend.photo_url3;
            need_photo = false;
          }
        } //end of state 4

        if (this.photo_state == 5) {
          var need_photo = true;
          if (
            this.friend.photo_url5 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url5
          ) {
            this.photo_url = this.friend.photo_url5;
            this.last_photo = this.friend.photo_url5;
            this.videofile = true;
            need_photo = false;
          }

          if (
            this.friend.photo_url6 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url6
          ) {
            this.photo_url = this.friend.photo_url6;
            this.last_photo = this.friend.photo_url6;
            this.videofile = true;
            need_photo = false;
          }

          if (
            this.friend.photo_url2 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url2
          ) {
            this.photo_url = this.friend.photo_url2;
            this.last_photo = this.friend.photo_url2;
            need_photo = false;
          }

          if (
            this.friend.photo_url3 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url3
          ) {
            this.last_photo = this.friend.photo_url3;
            this.photo_url = this.friend.photo_url3;
            need_photo = false;
          }

          if (
            this.friend.photo_url4 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url4
          ) {
            this.last_photo = this.friend.photo_url4;
            this.photo_url = this.friend.photo_url4;
            need_photo = false;
          }
        } //end of state 5

        if (this.photo_state == 6) {
          var need_photo = true;
          if (
            this.friend.photo_url6 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url6
          ) {
            this.photo_url = this.friend.photo_url6;
            this.last_photo = this.friend.photo_url6;
            this.videofile = true;
            need_photo = false;
          }

          if (
            this.friend.photo_url2 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url2
          ) {
            this.photo_url = this.friend.photo_url2;
            this.last_photo = this.friend.photo_url2;
            need_photo = false;
          }

          if (
            this.friend.photo_url3 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url3
          ) {
            this.photo_url = this.friend.photo_url3;
            this.last_photo = this.friend.photo_url3;
            need_photo = false;
          }

          if (
            this.friend.photo_url4 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url4
          ) {
            this.last_photo = this.friend.photo_url4;
            this.photo_url = this.friend.photo_url4;
            need_photo = false;
          }

          if (
            this.friend.photo_url5 != "" &&
            need_photo &&
            this.last_photo != this.friend.photo_url5
          ) {
            this.last_photo = this.friend.photo_url5;
            this.photo_url = this.friend.photo_url5;
            this.videofile = true;
            need_photo = false;
          }
        } // end of state 6

        //console.log(this.photo_url);
      } else {
        this.photo_state = 1;
        this.photo_url = this.friend.photo_url1;
        this.last_photo = this.friend.photo_url1;
        //console.log(this.photo_url);
      }
    },

    handle() {
      //console.log("Video paused!, playing in 2 sec...");

      setTimeout(() => {
        this.$refs.fish.play();
      }, 2000);
    },
    async onlineUsers() {
      //console.log("more users requested");
      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;
      // console.log("this.cursor", this.cursor);
      this.$store.dispatch("gotoTopPageOnline", payload);
    },
    async ilike() {
      var postData = {
        email: "nosa.osahon@gmail.com",
        gender: "F",
        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);
         //console.log(data);
          self.$store.commit("setContacts", obj);
          //self.contacts = obj;
          //console.log(self.todayblogger.name);
        }
      );
    },

    async idontlike() {
      var postData = {
        email: "nosa.osahon@gmail.com",
        gender: "F",
        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);
          console.log(data);
          self.$store.commit("setContacts", obj);
          //self.contacts = obj;
          //console.log(self.todayblogger.name);
        }
      );
    },

    async checkInternet() {
      // console.log("members");
      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);
      // console.log("extra days");
    },
    addFrd(frd) {
      var request = {};
      request.sender = firebase.auth().currentUser.uid;
      request.recipient = frd.uid;
      console.log("request", request);
      this.$store.dispatch("sendRequest", request);
    },
    gotoChat(frd) {
      var frd_string = JSON.stringify(frd);
      this.$f7router.navigate("/chat/" + encodeURIComponent(frd_string));
    },
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
  },

  async created() {
    let param = this.$f7route.params.frd; // decodeURIComponent(this.$f7route.params.frd);
    this.friend = JSON.parse(param);
    this.friend_Details = this.friend;
    this.friend_uid_chat = this.friend.uid;
    this.photo_url = this.friend.photo_url1;
    console.log(this.friend);
    this.photo_state = 1;
    this.last_photo = this.friend.photo_url1;
    //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");
    //console.log(this.pageSize);
    //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);
    //console.log("tekk me", this.cursor);
    // console.log("you there to do this");
    this.checkInternet();
    // this.$store.dispatch("getAllUsersNew");
    // this.$store.dispatch("getAppDbVersion");
    // this.$store.dispatch("getAppVersion");
    // this.$store.dispatch("getMyRequests");
    // this.$store.dispatch("getMyFriends");
  },
};
</script>

<style scoped>
.imagePicture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  border: 5px solid #555;
}
#video {
  width: 100%;
  text-align: center;
}
</style>