<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>
     <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="text" v-if="contact.userStatus=='online'">
          <font color="green">online</font>
        </span>
        <span slot="text" 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">Moderator</span>
        <span slot="footer" v-if="contact.userStatus=='offline'">
          <font size="1" color="grey">{{moment(contact.lastSeen).format("LLL")}};</font>
        </span>
        <img class="small-avatar" slot="media" :src="contact.photo_url" />

        <f7-swipeout-actions right>
          <f7-swipeout-button color="green" @click="addFrd(contact)">Add</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
import firebase from "firebase";
import moment from "moment";

export default {
  data() {
    return {
      moderator: true,
      appState: 1
    };
  },
  computed: {
    contacts() {
      return this.$store.getters.contacts;
    },

    friends() {
      return this.$store.getters.friends;
    },
    friend_requests() {
      return this.$store.getters.friend_requests;
    }
  },
  methods: {
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
    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);
    }
  },

  created() {
    this.$store.dispatch("getAllUsers");

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