<template>
    <q-btn push dense round text-color="white" @click="refreshChat">
        <q-icon name="far fa-comments" v-show="!(startchat)"></q-icon>
        <q-icon name="fas fa-times" v-show="(startchat)"></q-icon>
        <q-popover ref="popover" @show="startchat = true" @hide="startchat = false" keep-on-screen fit>
            <q-list>
                <q-item>
                <q-item-main>Songxy Community Chat</q-item-main>
                <q-item-side right>
                    <q-btn size="md" push dense round no-shadow icon="fas fa-sync" @click.native="refreshChat"/>
                </q-item-side>
                </q-item>
            </q-list>
            <q-slide-transition>
            <v-facebook-comments v-if="(startchat)"/>
            </q-slide-transition>
        </q-popover>
    </q-btn>
</template>

<script>
export default {
  name: 'Chat',
  data () {
    return {
      startchat: false
    }
  },
  methods: {
    refreshChat(){
      this.startchat = false
      this.$nextTick(() => {
          this.startchat = true
      })
    }
  }
</script