<template>
  <section>

      <div class="timeline" v-for="(item, index) in events" :key="index">

        <header class="timeline-header" v-if="showYear(index)"> <b-tag>{{ item.moment | moment('YYYY') }}</b-tag> </header>
        <header class="timeline-header" v-if="showMonth(index)"> <b-tag>{{ item.moment | moment('MMMM') }}</b-tag> </header>

        <div class="timeline-item">
          <b-icon class="timeline-icon" :class="css(item)" :icon="icone(item)" size="is-small"/>

          <div class="timeline-content">
            <small class="has-text-grey-light">{{ item.moment | moment("calendar") }}</small>
            <br/>
            <span v-html="description(item)"></span>
            <br />
            <span class="image is-16x16 is-pulled-left mr-2 mt-1">
              <v-gravatar class="is-rounded" :email="item.user || ''" :size="16" default-img="mm"/>
            </span>
            <small class="has-text-grey-light is-lowercase ">{{ item.user }}</small>
          </div>
        </div>
      </div>
    
  </section>
</template>

<script>
export default {
  name:"LeanispEventList",
  props: ["events"],
  methods: {
    findEventType(name) {
      return this.$events.find((item) => item.name === name)
    },
    description(item) {
      let eventType = this.findEventType(item.name);
      return (eventType) ? this.$t('events.'+item.name) : item.name
    },
    icone(item) {
      let eventType = this.findEventType(item.name);
      return (eventType) ? eventType.icon : 'check'
    },
    css(item) {
      let css = 'b-radius icone p-2 mr-2 mt-2 '
      if (item.status === 'PROCESSED') css += 'has-background-light'
      if (item.status === 'PROCESSING') css += 'has-background-primary has-text-white'
      if (item.status === 'PUBLISHED') css += 'has-background-info has-text-white'
      if (item.status === 'PENDING') css += 'has-background-warning has-text-white'
      if (item.status === 'FAILED') css += 'has-background-danger has-text-white'
      return css
    },
    showYear(index) {
      if (!this.events) {
        return false
      }
      if (index === 0) {
        return true
      }
      return this.getFullYear(index) !== this.getFullYear(index - 1)
    },
    showMonth(index) {
      if (!this.events) {
        return false
      }
      if (index === 0) {
        return true
      }
      return (this.getMonth(index) !== this.getMonth(index - 1)) || (this.getFullYear(index) !== this.getFullYear(index - 1))
    },
    getMonth(index) {
      return (new Date(this.events[index].moment)).getMonth()
    },
    getFullYear(index) {
      return (new Date(this.events[index].moment)).getFullYear()
    }
  }
};
</script>