<template>
  <div class="tabs is-centered">
    <ul>
      <li
        v-for="window in windows"
        :key="window.label"
        @click="$emit('set-window', window)"
        :class="{ 'is-active': window.label === activeWindow.label }"
      >
        <a>{{ window.label }}</a>
      </li>
    </ul>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
export default {
  props: {
    activeWindow: {
      type: Object
    }
  },
  setup(props, { emit }) {
    const windows = ref([
      {
        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
      }
    ])
    onMounted(() => {
      const activeWindow = !props.activeWindow.label
        ? windows.value[1]
        : windows.value.find((w) => w.label === props.activeWindow.label.replace('-', ' '))
      emit('set-window', activeWindow)
    })
    return {
      windows
    }
  }
}
</script>
