<template>
  <div>
    <div
      v-for="(notif, index) in notifications"
      :key="index"
      :class="{ box: true, new: notif.new, hide: !newNotification }"
    >
      <div class="box-time">
        {{ notif.time }}
      </div>
      <div class="box-title">
        {{ notif.title }}
      </div>
      {{ notif.description }}
    </div>
    <div class="show-more">
      show older notifications
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  props: {
    instanceId: {
      type: Number,
      required: true
    },
    newNotification: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      notifications: [
        {
          title: 'new data available',
          description: 'whateva',
          time: '2 hrs ago',
          timestamp: '2020-04-19 12:00:00', //TODO
          new: true
        },
        {
          title: 'analysis finished',
          description: 'whateva whateva',
          time: '4 days ago',
          timestamp: '2020-04-22 12:00:00', //TODO
          new: false
        },
        {
          title: 'new data available',
          description: 'This is a description of the new data available and where they come from',
          time: '12 days ago',
          timestamp: '2020-04-24 12:00:00', //TODO
          new: false
        }
      ]
    }
  },
  computed: {
    lastNotificationTimestamp() {
      if (!this.notifications) return '0'
      return this.notifications[this.notifications.length - 1].timestamp
    }
  },
  watch: {
    newNotification() {
      this.setNotificationTime({
        // slotId: this.instanceId,
        timestamp: this.lastNotificationTimestamp
      })
    }
  },
  methods: {
    ...mapActions('workspace', ['setNotificationTime'])
  }
}
</script>

<style lang="sass" scoped>
.box
  background-color: #ffffff55
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.05), 0 0 0 1px rgba(10, 10, 10, 0.05)
  // color: #777
  cursor: pointer
  margin-bottom: 0.5rem
  padding: 0.5rem 1rem 1rem
  &.new
    background-color: #ffffffcc
    font-weight: 700 !important
  &:hover
    background-color: #ffffffff
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.2), 0 0 0 1px rgba(10, 10, 10, 0.2)

.box-time
  color: #919191
  font-size: 0.8rem
  text-align: right

.new.hide
  display: none

.new .box-title
  font-weight: 700


.box-title
  font-weight: 500
  margin-top: -0.5rem

.show-more
  padding: 1.25rem
  margin: auto
  text-align: center
  color: #aaa
  cursor: pointer
  &:hover
    color: #919191
</style>
