<template>
  <div
    @click="triggerAction"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
    class="ui-notification"
    :class="{
      'cursor-pointer': notification.actions.length,
    }"
  >
    <ui-notification-item-side>
      <q-icon :name="icon" color="dark" size="28px" />
    </ui-notification-item-side>
    <div class="q-py-md full-width">
      <div class="ui-notification__header">
        <div class="text-h4" v-html="notification.title"></div>
        <div class="text-blue-grey ui-notification__subheader">{{ date }}</div>
      </div>
      <div
        v-html="notification.text"
        class="ui-notification__body text-body1"
      />
    </div>
    <ui-notification-item-side>
      <ui-notification-item-actions
        :is-show="isHover"
        @close="close"
        :notification="notification"
      />
    </ui-notification-item-side>
  </div>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { QSeparator } from 'quasar'
import { DateHelper } from '@/helpers'
import { NotificationEvent } from '@/widgets/notifications/types/NotificationEvent'
import UiNotificationItemActions from '@/widgets/notifications/components/notifications-list/item/UiNotificationItemActions.vue'
import NotificationsModule from '@/widgets/notifications/modules/NotificationsModule'
import CodeIconsHelper from '@/widgets/notifications/helpers/CodeIconsHelper'
import UiNotificationItemSide from '@/widgets/notifications/components/notifications-list/item/UiNotificationItemSide.vue'

@Component({
  components: { UiNotificationItemSide, UiNotificationItemActions, QSeparator },
  inheritAttrs: false,
})
export default class UiNotificationItem extends Vue {
  @Prop(Object) notification!: NotificationEvent

  @Inject('NotificationsModule')
  notificationStore!: NotificationsModule

  isHover = false

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

  get icon(): string {
    return CodeIconsHelper.getIcon(this.notification.typeCode)
  }

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

      this.close()

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

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