<template>
  <div class="notifications">
    <slide-y-up-transition :duration="transitionDuration"
                             group
                             mode="out-in">
      <notification
        v-for="notification in notifications"
        v-bind="notification"
        :clickHandler="notification.onClick"
        :key="notification.timestamp.getTime()"
        @close="removeNotification"
      >
      </notification>
    </slide-y-up-transition>
  </div>
</template>
<script>
import Notification from './Notification.vue'
import { SlideYUpTransition } from 'vue2-transitions'

export default {
  components: {
    SlideYUpTransition,
    Notification
  },
  props: {
    transitionDuration: {
      type: Number,
      default: 200
    },
    overlap: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      notifications: this.$notifications.state
    }
  },
  methods: {
    removeNotification (timestamp) {
      this.$notifications.removeNotification(timestamp)
    }
  },
  created () {
    this.$notifications.settings.overlap = this.overlap
  },
  watch: {
    overlap: function (newVal) {
      this.$notifications.settings.overlap = newVal
    }
  }
}
</script>
