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

      <f7-nav-right> </f7-nav-right>
    </f7-navbar>
    <div v-if="!videofile">
      <f7-list media-list class="wrapper">
        <f7-list-item swipeout :subtitle="friend.name">
          <span slot="subtitle" v-if="friend.gender == 'M'">&nbsp;M</span>
          <span slot="subtitle" v-else>&nbsp;F</span>
          <img class="imagePicture" slot="title" :src="photo_url" />
          <span slot="subtitle">
            &nbsp;{{ moment(friend.birthDate, "YYYYMMDD").fromNow(true) }}<br
          /></span>
          <span slot="subtitle">{{ friend.location }}<br /></span>
          <span slot="text">{{ friend.profileMessage }}</span>

          <f7-row no-gap text-align="center">
            <f7-col><b>Fans</b><br />{{ nFormatter(friend.fans) }}</f7-col>
            <f7-col><b>Following</b> <br />{{ friend.following }}</f7-col>
            <f7-col
              ><b>Philanthropy</b> <br />{{
                nFormatter(friend.gift_out)
              }}</f7-col
            >
            <f7-col
              ><b>Treasure</b> <br />{{
                nFormatter(friend.wallet_backup)
              }}</f7-col
            >
          </f7-row>
          <br />
          <br />
          <f7-row no-gap>
            <f7-col
              >Send <b>{{ friend.name }}</b> A gift
            </f7-col>
            <f7-col
              ><f7-link @click="giftVenus(1)">
                <a
                  href="#"
                  class="link tooltip-init"
                  data-tooltip="Gift: Venus"
                >
                  <i class="f7-icons color-lime size-16">cube_box_fill</i>
                </a>
              </f7-link></f7-col
            >
            <f7-col>
              <f7-link @click="giftVenus(2)">
                <a href="#" class="link tooltip-init" data-tooltip="Gift: Mars">
                  <i class="f7-icons color-deeppurple size-16">gift_fill</i>
                </a>
              </f7-link></f7-col
            >
            <f7-col>
              <f7-link @click="giftVenus(3)">
                <a
                  href="#"
                  class="link tooltip-init"
                  data-tooltip="Gift: Jupitar"
                >
                  <i class="f7-icons color-teal size-16">gift_alt_fill</i>
                </a>
              </f7-link></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>
          </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%', height: 'auto' }"
      >
      </Media>

      <f7-list media-list class="wrapper">
        <f7-list-item swipeout :subtitle="friend.name">
          <span slot="subtitle" v-if="friend.gender == 'M'">&nbsp;M</span>
          <span slot="subtitle" v-else>&nbsp;F</span>
          <span slot="subtitle">
            &nbsp;{{ moment(friend.birthDate, "YYYYMMDD").fromNow(true) }}<br
          /></span>
          <span slot="subtitle">{{ friend.location }}</span
          >&nbsp;

          <span slot="text">{{ friend.profileMessage }}</span>

          <f7-row no-gap text-align="center">
            <f7-col><b>Fans</b><br />{{ nFormatter(friend.fans) }}</f7-col>
            <f7-col><b>Following</b> <br />{{ friend.following }}</f7-col>
            <f7-col
              ><b>Philanthropy</b> <br />{{
                nFormatter(friend.gift_out)
              }}</f7-col
            >
            <f7-col
              ><b>Treasure</b> <br />{{
                nFormatter(friend.wallet_backup)
              }}</f7-col
            >
          </f7-row>
          <br />
          <br />
        </f7-list-item>
      </f7-list>
      <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-row no-gap>
      <f7-col
        ><p text-align="center">
          <f7-link class="formatLinks" @click="blockUser(friend.email)">
            Block
          </f7-link>
        </p></f7-col
      >

      <f7-col
        ><p text-align="center">
          <f7-link class="formatLinks" @click="unBlockUser(friend.email)">
            Unblock
          </f7-link>
        </p></f7-col
      >
      <f7-col
        ><p text-align="center">
          <f7-link class="formatLinks" @click="reportUser()"> Report </f7-link>
        </p></f7-col
      >
      <f7-col
        ><p text-align="center">
          <f7-link
            class="formatLinks"
            @click="unMatch(friend.email, friend.name)"
          >
            UnMatch
          </f7-link>
        </p></f7-col
      >
    </f7-row>
  </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: {
    wallet() {
      return this.$store.getters.wallet;
    },

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

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

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

  methods: {
    reportUser() {
      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 = this.friend.email;
              payload.domain = this.user[0].domain;
              payload.userAbuse = response;

              this.$store.dispatch("reportUserToAdmin", payload);
              this.$f7.dialog.close();
            } else {
              if (index == 1) {
                this.$store.commit(
                  "setAlertMessage",
                  "Select Reason for Reporting the user"
                );
              }
            }
          },
          on: {
            open: function () {},
          },
        })
        .open();
    },
    unBlockUser(friend) {
      var payload = {};
      payload.email_u = this.user[0].email;
      payload.email_f = this.friend.email;
      payload.domain = this.user[0].domain;

      this.$store.dispatch("unBlockUser", payload);
      // this.$store.dispatch("checkUserBlocked", this.friend);
      // this.$store.dispatch("checkBlockByFriend", this.friend);
      //this.$store.dispatch("checkUserBlocked", this.friend);
      this.$f7.popover.close();
    },

    blockUser(friend) {
      var payload = {};
      payload.email_u = this.user[0].email;
      payload.email_f = this.friend.email;
      payload.domain = this.user[0].domain;

      console.log(payload);

      this.$store.dispatch("blockUser", payload);
      // this.$store.dispatch("checkUserBlocked", this.friend);
      //this.$store.dispatch("checkBlockByFriend", this.friend);
      this.$f7.popover.close();
    },

    giftVenus(gift) {
      var amount = 0;
      var messageout = "";
      if (gift == 1) {
        amount = 100;
        messageout = "Sending Venus Gift to ";
      }

      if (gift == 2) {
        amount = 500;
        messageout = "Sending Mars Gift to ";
      }

      if (gift == 3) {
        amount = 1000;
        messageout = "Sending Jupiter Gift to ";
      }

      //console.log(this.wallet)

      if (this.wallet < amount) {
        //user does not have enough money
        var dialog = this.$f7.dialog
          .create({
            title: "Wallet too low to gift " + this.friend.name,
            text: "Your wallet is too low. Please click TopUp Account to continue",
            content: "",

            buttons: [
              { text: "Cancel", close: true },
              { text: "Topup Account" },
            ],
            onClick: (dialog, index) => {
              if (index == 1) {
                const app = this.$f7;
                this.$f7router.navigate("/pay4me/", {});

                //this.$store.dispatch("sendGiftVenus", payload);
                this.$f7.dialog.close();
                app.panel.close();
              } else {
              }
            },
            on: {
              open: function () {
                //console.log("OPEN");
              },
            },
          })
          .open();
      } else {
        //user has enough money

        var dialog = this.$f7.dialog
          .create({
            title: messageout + this.friend.name,
            text:
              "You are about to send " +
              amount +
              " Points to " +
              this.friend.name +
              ". Please click send to confirm",
            content: "",

            buttons: [{ text: "Cancel", close: true }, { text: "Send" }],
            onClick: (dialog, index) => {
              if (index == 1) {
                const app = this.$f7;
                //var payload = {};
                //payload.profileMessage = response;
                var payload = {};
                payload.email_f = this.friend.email;
                payload.email_u = this.user[0].email;
                payload.domain = this.user[0].domain;
                payload.amount = amount;
                payload.name = this.friend.name;
                this.$store.dispatch("sendGiftVenus", payload);
                this.$f7.dialog.close();
                app.panel.close();
              } else {
              }
            },
            on: {
              open: function () {
                //console.log("OPEN");
              },
            },
          })
          .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;
    },

    unMatch(frd_email, frd_name) {
      //console.log("unmatch", frd_email + frd_name)
      var dialog = this.$f7.dialog
        .create({
          title: `Unmatch ${frd_name}?`,
          text: `This will remove ${frd_name} from your friend list and communication between two of you will not be possible again. Please can you confirm you want this?`,
          content: "",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],
          onClick: (dialog, index) => {
            if (index == 1) {
              //console.log("payload");
              const app = this.$f7;
              //console.log("payload");
              //var payload = {};
              //payload.profileMessage = response;
              var payload = {};
              payload.email_u = this.user[0].email;
              payload.email_f = frd_email;
              payload.domain = this.user[0].domain;
              //console.log(payload);
              //return;
              var response = this.$store.dispatch("unMatchUser", payload);
              //console.log("response unmatch", response);
              this.$f7.dialog.close();
              app.panel.close();
              this.$f7.popover.close();

              this.$store.commit(
                "setAlertMessage",
                "Done. Account Unmatched! Please close the popup."
              );
              //this.$f7router.navigate("/", {});
            } else {
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
    },
    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;
            //console.log("");
          }

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

    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.photo_url);
    this.photo_state = 1;
    this.last_photo = this.friend.photo_url1;
    //console.log("friends details", this.friend);
    //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>
.formatLinks {
  text-decoration: none !important;
  color: inherit;
}
.imagePicture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  height: auto;
  border: 5px solid #555;
}
#video {
  width: 100%;
  text-align: center;
}

.size-12 {
  font-size: 12px;
}

.color-red {
  color: greenyellow;
}

.color-white {
  color: white;
}

.chat-time {
  display: block;
  font-size: 0.6em;
  margin-top: 3px;
}

.small-avatar2 {
  width: 50px;
  height: 50px;
  margin: 10px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.wrapper {
  text-align: center;
  margin: 20px;
}

.image--cover1 {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: 20px;
  object-fit: cover;
  object-position: center;
}
.small-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.image--cover {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.halfcol {
  width: 10%;
  margin-left: 580px;
}

@media only screen and (max-width: 600px) {
  .halfcol {
    width: 50%;
    margin-left: 100px;
    margin-bottom: 20px;
  }
}
</style>