<template>
  <div>
    <h1>{{myEmail}} {{myUserType}}</h1>
    <div class="container">
      <div class="row justify-content-center" >
        <div class="card text-center col-sm-6 " style="margin-top:5px;" v-for="userDetails in userdata">
          <div class="card-header">
            {{userDetails.email}}
          </div>
          <div class="card-body">
            <p class="card-text">
              Adress:{{userDetails.adress}}<br>
              City:{{userDetails.city}}<br>
              Name:{{userDetails.fname}}<br>
              Surname:{{userDetails.lname}}<br>
              Zip:{{userDetails.zip}}<br>
              Id:{{userDetails.id}}
            </p>
          </div>
          <div class="card-footer text-muted">
            {{ userDetails.posted_at | formatTime }}
          </div>

            <button @click="editComment(userDetails)" type="button" class="btn btn-primary" data-toggle="modal" data-target="#commentModal">
              note
            </button>

        </div>
        <div class="card text-center col-sm-6 " style="margin-top:5px;" v-if="hasNoUserDetails">
          <div class="card-header">
            No user
          </div>
          <div class="card-body">
            <p class="card-text">
              No data
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="commentModalLongTitle">Insert comment</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
          <div class="modal-body">
            <textarea placeholder="comment" v-model="note"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button @click="saveComment()" type="submit" class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import store from '@/store.js'
export default{
  data(){
    return store
  },
  computed: {
    hasNoUserDetails() {
      return this.userdata.length == 0;
    }
  },
  mounted(){

    firebase.auth().onAuthStateChanged(user => {
      if(user){
        this.myEmail=user.email;
        db.collection("users")
          .doc(this.myEmail)
          .get()
          .then(doc => {
            if (doc.exists) {
              this.myUserType = doc.data().typeofuser;
            } else {
              console.log("No data");
            }
          });
      }
    });
    // fetch user addresses
    db.collection("form").where("posted_at", ">=", 1)
      .get()
      .then(querySnapshot => {

        querySnapshot.forEach(doc => {
          console.log(doc.id, " => ", doc.data());
          this.userdata.push(Object.assign({}, doc.data(), {
            id: doc.id
          }));
        });
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      });
  },
  filters: {
    formatTime: function(value) {
      return moment(value).format('MMMM Do YYYY, h:mm:ss a')
    }
  },
  methods: {
    update(){
    db.collection("form").onSnapshot((querySnapshot)=>{
        this.userdata1=[]
        querySnapshot.forEach((doc)=>{
          this.userdata1.push(doc.data().comment);
        });
      });
    },
    editComment(userDetails) {
      $('#commentModal').modal('show');
      this.note = userDetails.comment || '';
      this.activeuser = userDetails.id;
    },
    saveComment() {
      let id = this.activeuser;
      if (!id) {
        alert('Fail');
        return;
      }
      db.collection("form")
        .doc(this.activeuser)
        .update({
          comment: this.note
        })
        .then(() =>{
          this.update();
          $('#commentModal').modal('hide');
          console.log("Document successfully written!");
        })
        .catch(function(error) {
          console.error("Error writing document: ", error);
        });
    }
  }
};
</script>