<template>
  <div v-show="showNotifications" class="notification-bar">
    <or-alert
      v-for="(notification, index) in notifications"
      :key="notification.message"
      :type="notification.type ? notification.type : 'info'"
      @dismiss="closeAlert(index)"
    >
      {{ notification.message }}
    </or-alert>
  </div>
</template>

<script>
const NOTIFICATION_SHOW_DURATION_MS = 3000;

export default {
  name: 'NotificationBar',

  data () {
    return {
      notifications: []
    };
  },
  
  computed: {
    showNotifications () {
      return this.notifications.length > 0;
    }
  },

  created () {
    this.$EventBus.$on('notify', this.addNotification);
  },

  methods: {
    closeAlert (index) {
      this.notifications.splice(index, 1);
    },

    addNotification (notification) {
      this.notifications.push(notification);
      setTimeout(() => this.closeAlert(this.notifications.indexOf(alert)), NOTIFICATION_SHOW_DURATION_MS);
    }
  }
};
</script>

<style lang="scss" scoped>
.ui-alert { 
  margin: 1rem 0 0;
}
</style>
