<template>
  <div class="header-notifications__wrapper">
    <span class="unread-notifications__badge"> {{ unreadNotifications }}</span>
    <ods-actions-menu class="header-notifications"
      icon="notification"
      customClass="header-notifications__popover"
      width="360"
      :onShowEvent="true"
      :onHideEvent="true"
      @show="showMobileOverlay"
      @hide="hideMobileOverlay"
      boundariesElement=".ods-main-header">
      <ul class="ods-actions-menu__ul ods-actions-menu__ul--notifications">
        <li class="ods-actions-menu__notifications__item ods-actions-menu__notifications__item--title notification__inner">
            <h6 class="notification__title"> {{ $t('notifications.popoverTitle') }}</h6>
              <span class="notifications-counter"> {{ unreadNotifications }}</span>
        </li>
        <li class="ods-actions-menu__notifications__item notification__inner"
          v-for="(notification, index) in notifications"
          :key="notification.title + index"
          :class="{'ods-actions-menu__notifications__item--unread': !notification.status}">
            <h6 class="notification__title"> {{ notification.title }} </h6>
            <p class="notification__content"> {{ notification.content | truncate(150, '...') }}</p>
            <time class="notification__date"
              :datetime="notification.date"> {{ notification.date }}</time>
            <component class="notification__link"
              :is="linkTag(notification)"
              v-bind="properties"> {{ notification.linkText }}
            </component>
        </li>
      </ul>
    </ods-actions-menu>
  </div>
</template>

<script>
import * as _ from 'lodash';
import cssVars from '@/assets/scss/main.scss';

export default {
  name: 'HeaderNotifications',
  data() {
    return {
      notificationsDemo: {},
      isPhone: window.matchMedia(`(max-width: ${cssVars.phoneBreakpoint})`).matches,
    };
  },
  computed: {
    notifications() {
      return _.orderBy(this.notificationsDemo, ['status', 'date'], ['asc', 'desc']);
    },
    unreadNotifications() {
      return this.notifications.filter(e => !e.status).length;
    },
  },
  methods: {
    linkTag(notification) {
      if (this.$router && !notification.url.includes('http')) {
        this.properties = {to: notification.url};
        return 'router-link';
      }
      this.properties = {
        href: notification.url,
        target: '_blank',
      };
      return 'a';
    },
    showMobileOverlay() {
      this.$parent.showMobileOverlay();
    },
    hideMobileOverlay() {
      this.$parent.hideMobileOverlay();
    },
  },
};
</script>

<style lang="scss" scoped>
  .header-notifications__wrapper {
    position: relative;
    .unread-notifications__badge {
      $--badge-size: 16px;
      position: absolute;
      right: 1px;
      top: 1px;
      width: $--badge-size;
      height: $--badge-size;
      background: $--color-primary;
      color: $--color-white;
      font-size: rem(9);
      line-height: $--badge-size;
      text-align: center;
      font-weight: 500;
      border-radius: 50%;
    }
  }
</style>
