<template>
  <f7-page name="about" @page:beforein="initHome">
    <f7-navbar title="Members" class="navbar color-theme-orange">
      <!-- <div slot="right" @click="lock()" v-if="moderator">Lock</div> -->
      <f7-nav-right>
        <f7-link
          class="searchbar-enable"
          data-searchbar=".searchbar-demo"
          icon-ios="f7:search"
          icon-aurora="f7:search"
          icon-md="material:search"
          color="blue"
        ></f7-link>
      </f7-nav-right>

      <f7-searchbar
        class="searchbar-demo"
        expandable
        search-container=".search-list"
        search-in=".item-title"
        :disable-button="!$theme.aurora"
      ></f7-searchbar>
    </f7-navbar>
    <div v-if="!appUpdate">
      <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
          swipeout
          v-for="(contact, index) in contacts"
          :key="index"
          :title="contact.name"
          @click="gotoChat(contact)"
        >
          <span slot="footer" v-if="contact.userStatus == 'online'">
            <font color="green"><b>online</b></font>
          </span>
          <span slot="footer" v-else>
            <font color="grey">offline</font>
          </span>

          <span slot="subtitle" v-if="contact.location">{{
            contact.location
          }}</span>
          <span
            slot="after-title"
            v-if="contact.userType == 2 || contact.userType == 3"
            >Moderator</span
          >

          <span slot="footer" v-if="contact.userStatus == 'offline'">
            <font size="1" color="grey"
              >&nbsp;&nbsp;{{ moment(contact.lastSeen).format("LLL") }};</font
            >
          </span>
          <img class="small-avatar" slot="media" :src="contact.photo_url" />
        </f7-list-item>
      </f7-list>

      <f7-block>
        <f7-row gap>
          <f7-col v-if="backPage">
            <f7-button fill @click="backward">Left</f7-button>
          </f7-col>

          <f7-col v-if="topPage">
            <f7-button fill @click="topward">Top</f7-button></f7-col
          >
          <f7-col v-if="bottomPage">
            <f7-button fill @click="downward">Down</f7-button>
          </f7-col>

          <f7-col v-if="forwardPage">
            <f7-button fill @click="forward">Right</f7-button></f7-col
          >
        </f7-row>
      </f7-block>
    </div>
    <!-- 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</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 firebase from "firebase";
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: {
    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: {
    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 downward() {
      //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("gotoBottomPage", payload);
    },
    async topward() {
      //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("gotoTopPage", payload);
    },

    async forward() {
      console.log("more users requested", this.ref);
      this.pageSize = await this.$store.dispatch("getUserPageSize");
      var payload = {};
      payload.dbReference = 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("getAllUsersForward", payload);
    },

    async backward() {
      //console.log("more users requested");
      this.pageSize = await this.$store.dispatch("getUserPageSize");
      var payload = {};
      payload.dbReference = this.ref;
      payload.cursor = this.cursor;
      payload.pageSize = this.pageSize;
      payload.uid = firebase.auth().currentUser.uid;
      payload.back_toggle = this.back_toggle;
      console.log("this.cursor", this.cursor);
      this.$store.dispatch("getAllUsersBackward", payload);
    },
    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() {
    //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("getMyRequests");
    // this.$store.dispatch("getMyFriends");
  },
};
</script>

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