<template>
  <f7-page name="home" @page:beforein="initHome">
    <div class="page-content infinite-scroll-content infinite-scroll-top">
      <!-- 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>CityGists</f7-nav-title>
        <f7-nav-right>
          <div slot="right" v-if="this.subscribe_affiliate">
            <span
              v-if="this.user_country=='Nigeria'"
            >Payout &nbsp;&#x20A6;{{user_payout}} &nbsp;&nbsp;</span>
            <span v-else>Payout &nbsp;&#36;{{user_payout}} &nbsp;&nbsp;</span>
          </div>
          <f7-icon f7="bell" slot="right">
            <f7-badge color="red" v-if="total_message >0">{{total_message}}</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>CityGists</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>
      <f7-list class="searchbar-not-found">
        <f7-list-item title="Nothing found"></f7-list-item>
      </f7-list>
      <f7-list class="search-list searchbar-found" media-list>
        <f7-list-item
          v-for="(frd, index) in friends"
          :key="index"
          :title="frd.name"
          :text="frd.latest_message"
          @click="gotoChat(frd)"
        >
          <f7-badge color="red" slot="after-title" v-if="frd.message_count >0">{{frd.message_count}}</f7-badge>

          <img class="small-avatar" slot="media" :src="frd.photo_url" />

          <span slot="footer" v-if="frd.userStatus=='online'">
            <font color="green">online</font>
          </span>
          <span slot="footer" v-else>
            <font color="grey">offline</font>
          </span>
          <span slot="subtitle" v-if="frd.location">{{frd.location}}</span>
          <span slot="after-title" v-if="frd.userType==2">Moderator</span>
        </f7-list-item>
      </f7-list>
      <f7-popover class="popover-menu">
        <f7-list>
          <f7-list-item link="#" popup-open=".demo-popup-user" popover-close title="Profile"></f7-list-item>
          <f7-list-item link="/editprofile/" popover-close title="Settings"></f7-list-item>
          <f7-list-item link="/postfriends/" popover-close title="Post Messages"></f7-list-item>
          <f7-list-item link="/usernotifications/" popover-close title="Notifications"></f7-list-item>
          <f7-list-item link="/affiliate/" popover-close title="Pay4me"></f7-list-item>
          <f7-list-item @click="logoutApp()" popover-close title="Logout"></f7-list-item>
        </f7-list>
      </f7-popover>

      <f7-popup class="demo-popup-user" backdrop:false>
        <f7-page>
          <f7-navbar :title="this.user_details.name" :subtitle="this.user_details.location">
            <div slot="default">
              <span
                :v-if="this.user_details.birthDate"
              >{{moment(this.user_details.birthDate,"YYYYMMDD").fromNow(true)}}</span>
            </div>
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>
            <div class="wrapper">
              <img class="image--cover1" :src="this.user_details.photo_url" />
            </div>
            <div class="wrapper">
              <p>
                <b>Profile Message</b>
                <br />
                {{this.user_details.profileMessage}}
              </p>
            </div>
            <div class="wrapper">
              <p>
                <b>Your Email</b>
                <br />
                {{this.user_details.email}} --> Only you see this
              </p>
            </div>
            <div class="wrapper">
              <p>
                <b>Your Phone Number</b>
                <br />
                {{this.user_details.phonenumber}} --> Only you see this
              </p>
            </div>
            <br />
            <br />
          </f7-block>
        </f7-page>
      </f7-popup>
    </div>
  </f7-page>
</template>

<script>
var numeral = require("numeral");

export default {
  data() {
    return {
      //user_details: null
    };
  },
  mounted() {
    this.$store.dispatch("getTotalMessage");
    this.$f7ready((f7) => {
      // cordova.plugins.firebase.messaging.onMessage(function(payload) {
      //alert("messagereceived" + JSON.stringify(payload.gcm.body));
      // this.$f7.showToastBottom(payload.gcm.body);
      //});
    });
  },

  methods: {
    formatNumber(value) {
      return numeral(value).format("0,0.00"); // displaying other groupings/separators is possible, look at the docs
    },
    logoutApp() {
      const app = this.$f7;
      this.$store.dispatch("signOut");

      this.$f7.popover.close();
    },
    showToastBottom(text) {
      const self = this;
      self.$f7ready(() => {
        // Create toast
        if (!self.toastBottom || self.toastBottom.destroyed) {
          self.toastBottom = self.$f7.toast.create({
            text: text,
            closeTimeout: 2000,
            destroyOnClose: true,
          });
        }
        // Open it
        self.toastBottom.open();
      });
    },
    gotoChat(frd) {
      var frd_string = JSON.stringify(frd);
      //console.log("Nosa I am here " + frd_string);
      this.$f7router.navigate("/chat/" + encodeURIComponent(frd_string));
      //console.log("Nosa I am here " + frd_string);
    },
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
  },

  computed: {
    user_payout: {
      get: function () {
        return this.formatNumber(this.$store.getters.user_payout);
      },
      set: function (newValue) {
        this.$store.commit("setUserLocation", newValue);
      },
    },
    user_country() {
      return this.$store.getters.user_country;
    },
    subscribe_affiliate() {
      return this.$store.getters.subscribe_affiliate;
    },
    user_details() {
      return this.$store.getters.user_details;
    },
    friends() {
      return this.$store.getters.friends;
    },
    friend_requests() {
      return this.$store.getters.friend_requests;
    },
    message_count() {
      return this.$store.getters.message_count;
    },
    total_message() {
      console.log("total_message" + this.$store.getters.total_message);
      return this.$store.getters.total_message;
    },
  },
  created() {
    // this.$store.dispatch("getMyRequests");
    this.$store.dispatch("getMyFriends");
    this.$store.dispatch("getTotalMessage");
    this.$store.dispatch("getUserDetails");
    this.$store.dispatch("getUserAffiliate");
    this.$store.dispatch("getUserPayout");
    this.$store.dispatch("getUserCountry");
    //this.user_payout = this.formatNumber(this.user_payout);
    //console.log("toast1");
    //this.showToastBottom("hello");
    //console.log("toast2");
  },
};
</script>

<style>
.small-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* Custom color theme */
:root {
  --f7-theme-color: #42a5f5;
  --f7-theme-color-rgb: 66, 165, 245;
  --f7-theme-color-shade: #1b93f3;
  --f7-theme-color-tint: #69b7f7;
}
/* Invert navigation bars to fill style */
:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
}
.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;

  --r: 66;
  --g: 165;
  --b: 245;
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}
.theme-dark .navbar-large-transparent,
.theme-dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}

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

.wrapper {
  text-align: center;
}

.image--cover1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 5px;
  object-fit: cover;
  object-position: center;
}
</style>