<template lang="pug">
.the-notifications(v-bind:class="[isNotificationsVisible ? 'the-notifications-open' : '']")
  .d-flex.justify-content-between
    h3 \{{ $t('strings.notifications') }}
    vm-button(type="flat" size="small" @click="markAllNotifications") \{{ $t('strings.see_all') }}
  transition-group(name="notifications-list" tag="ul")
    li(v-for="(notification, index) in notifications"  :key="notification.id" @click="clickNotification(notification)")
      vm-avatar(color="primary" :text="notification.data.avatar")
      .text
        b \{{ notification.data.user }} &nbsp;
        slot \{{ $t(notification.data.message) }}
        span · \{{ notification.created_at | moment("from") }}
  .msg(v-show="emptyNotifications")
    img(src="@/assets/empty_notifications.jpg")
    h3 \{{ $t('notifications.empty_title') }}
    span \{{ $t('notifications.empty_msg') }}
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'TheNotifications',
  computed: {
    ...mapGetters(['csrfToken', 'notifications', 'isNotificationsVisible']),
    emptyNotifications () {
      return this.notifications.length === 0
    }
  },
  mounted () {
    this.$echo && this.$echo.private('App.User.' + this.$auth.user().id).notification(notification => {
      this.addNotification(notification)
    })
  },
  methods: {
    ...mapActions(['addNotification', 'clickNotification', 'markAllNotifications'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.notifications-list-move
  transition transform 1s

.notifications-list-enter-active .notifications-list-leave-active
  transition all 1s

.notifications-list-enter, .notifications-list-leave-to
  opacity 0
  transform translateY(30px)

.the-notifications-open
  right 0px !important

.the-notifications
  background white
  width 300px
  height 100%
  position fixed
  right -350px
  top 0
  padding 70px 20px 0 20px
  -webkit-transition all .3s
  transition all .3s
  z-index 9999
  box-shadow -9px 0px 25px 0 rgba(46, 61, 73, 0.11)
  img
    width 100%
  .msg
    text-align center
    -webkit-transition all .3s
    transition all .3s
  ul
    list-style-type none
    margin 0
    padding 0

    li
      margin 5px 0
      cursor pointer
      display -webkit-box
      padding 5px 0
      border-radius 20px
      transition all .3s ease-out
      &:hover
        background rgba(42, 99, 245, 0.2)
      .con-vm-avatar
        border-radius 25% !important
      .text
        margin-left 5px
        width 80%
        span
          font-size smaller
          font-weight bold
</style>
