<template>
  <transition
    appear
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <div
      @click="triggerAction"
      class="ui-notification"
      :class="{
        'cursor-pointer': notification.actions.length,
      }"
    >
      <div
        v-html="notification.title"
        class="q-pa-md ui-notification__header"
      />
      <div
        v-html="notification.text"
        class="q-px-md q-pb-md ui-notification__body"
      />
      <q-separator />
      <div class="q-pa-sm flex no-wrap items-center ui-notification__footer">
        <div class="q-ml-sm text-blue-grey">
          {{ date }}
        </div>
        <ui-notification-item-actions
          @close="close"
          :notification="notification"
        />
      </div>
    </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 } from 'quasar'

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

  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>
