<template>
  <transition
    appear
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <div
      @click="triggerAction"
      @mouseenter="isHover = true"
      @mouseleave="isHover = false"
      class="ui-notification ui-notification_dark"
      :class="{
        'cursor-pointer': notification.actions.length,
      }"
    >
      <div
        v-html="notification.title"
        class="q-pa-md ui-notification__header"
      />
      <q-slide-transition>
        <div v-show="isHover">
          <div
            v-html="notification.text"
            class="q-px-md q-pb-md ui-notification__body"
          />
          <q-separator class="bg-blue-grey-6" />
          <div
            class="q-pa-sm flex no-wrap items-center ui-notification__footer"
          >
            <div class="q-ml-sm text-white">
              {{ date }}
            </div>
            <ui-notification-item-actions
              @close="close"
              :notification="notification"
              dark
            />
          </div>
        </div>
      </q-slide-transition>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { NotificationEvent } from '../types/NotificationEvent'
import DateHelper from '../../../../helpers/DateHelper'
import UiNotificationItemActions from '../item/UiNotificationItemActions.vue'
import NotificationsStore, {
  getNotificationsStore,
} from '../stores/NotificationsStore'
import { QSeparator, QSlideTransition } from 'quasar'

@Component({
  components: { UiNotificationItemActions, QSeparator, QSlideTransition },
  inheritAttrs: false,
})
export default class UiNotificationList extends Vue {
  @Prop(Object) notification!: NotificationEvent
  @Prop(Boolean) dark?: boolean

  isHover = false
  notificationStore!: NotificationsStore

  created() {
    this.notificationStore = getNotificationsStore(this.$store)
  }

  get date(): string {
    return DateHelper.format(this.notification.createdAt)
  }

  triggerAction() {
    if (this.notification.actions.length) {
      const href = this.notification.actions[0].link

      if (this.dark) {
        this.close()
      }

      window.open(href, '_blank')
    }
  }

  close() {
    this.notificationStore.closeNotification(this.notification.id)
  }
}
</script>
