<template>
  <div class="tabs is-centered">
    <ul>
      <li
        v-for="window in windows"
        :key="window.label"
        @click="$emit('setWindow', window)"
        :class="{'is-active': window.label === activeWindow.label}"
      >
        <a>{{window.label}}</a>
      </li>
    </ul>
  </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  props: {
    activeWindow: {
      type: [Object, String]
    }
  },
  data() {
    return {
      windows: [{
        label: 'afgelopen uur',
        getStart: () => dayjs().subtract(1, 'hour').unix(),
        getEnd: () => dayjs().unix(),
        format: 'HH:mm',
        interval: 4
      }, {
        label: '24 uur',
        getStart: () => dayjs().subtract(1, 'days').unix(),
        getEnd: () => dayjs().unix(),
        format: 'HH:mm',
        interval: 4
      }, {
        label: 'vandaag',
        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
        getEnd: () => dayjs().unix(),
        format: 'HH:mm',
        interval: 4
      }, {
        label: '3 dagen',
        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
        getEnd: () => dayjs().unix(),
        format: 'ddd D/M',
        interval: 24
      }, {
        label: 'week',
        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
        getEnd: () => dayjs().unix(),
        format: 'ddd D/M',
        interval: 24
      }, {
        label: 'maand',
        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
        getEnd: () => dayjs().unix(),
        format: 'ddd D/M',
        interval: 24
      }, {
        label: 'jaar',
        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
        getEnd: () => dayjs().unix(),
        format: 'ddd D/M',
        interval: 24 * 7
      }]
    }
  },
  mounted() {
    if (typeof this.activeWindow === 'string') {
      const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
      this.$emit('setWindow', window)
    } else if (!this.activeWindow.label) {
      this.$emit('setWindow', this.windows[1])
    }
  }
}
</script>
