<template>
  <f7-page name="about">
    <f7-navbar title="Contacts" back-link="Back"></f7-navbar>
    <f7-list media-list>
      <f7-list-item
        swipeout
        v-for="(contact, index) in contacts"
        :key="index"
        :title="contact.name"
      >
        <span slot="subtitle" v-if="contact.userStatus=='online'">
          <font color="green">online</font>
        </span>
        <span slot="subtitle" v-else>
          <font color="grey">offline</font>
        </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 {
  computed: {
    contacts() {
      return this.$store.getters.contacts;
    }
  },
  methods: {
    addFrd(frd) {
      var request = {};
      request.sender = firebase.auth().currentUser.uid;
      request.recipient = frd.uid;
      console.log("request", request);
      this.$store.dispatch("sendRequest", request);
    }
  },

  created() {
    this.$store.dispatch("getAllUsers");
  }
};
</script>

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