<template>
  <UiInput class="timeframe">
    <select name="" id="" v-model="timeframe">
      <option :value="Timeframe.LAST_10_MINUTES">Letzte 10 Minuten</option>
      <option :value="Timeframe.LAST_30_MINUTES">Letzte 30 Minuten</option>
      <option :value="Timeframe.LAST_HOUR">Letzte Stunde</option>
      <option :value="Timeframe.LAST_3_HOURS">Letzte 3 Stunden</option>
      <option :value="Timeframe.LAST_6_HOURS">Letzte 6 Stunden</option>
      <option :value="Timeframe.LAST_12_HOURS">Letzte 12 Stunden</option>
      <option :value="Timeframe.LAST_24_HOURS">Letzte 24 Stunden</option>
      <option :value="Timeframe.LAST_7_DAYS">Letzte 7 Tage</option>
      <option :value="Timeframe.LAST_30_DAYS">Letzte 30 Tage</option>
      <option :value="Timeframe.LAST_90_DAYS">Letzte 90 Tage</option>
      <option :value="undefined">Custom...</option>
    </select>
  </UiInput>
</template>

<script setup lang="ts">
import { Timeframe } from '~/classes/monitoring/MonitoringTimeframe';
import { Period } from './Period';
import utc from 'dayjs/plugin/utc';
import dayjs from 'dayjs';

const timeframe = ref(Timeframe.LAST_HOUR);

const period = computed((): Period => {
  dayjs.extend(utc)
  const now = dayjs().utc().unix();
  switch (timeframe.value) {
    case Timeframe.LAST_10_MINUTES:
      return new Period(dayjs().utc().subtract(10, 'minutes').unix(), now)
    case Timeframe.LAST_30_MINUTES:
      return new Period(dayjs().utc().subtract(30, 'minutes').unix(), now)
    case Timeframe.LAST_HOUR:
      return new Period(dayjs().utc().subtract(1, 'hours').unix(), now)
    case Timeframe.LAST_3_HOURS:
      return new Period(dayjs().utc().subtract(3, 'hours').unix(), now)
    case Timeframe.LAST_6_HOURS:
      return new Period(dayjs().utc().subtract(6, 'hours').unix(), now)
    case Timeframe.LAST_12_HOURS:
      return new Period(dayjs().utc().subtract(12, 'hours').unix(), now)
    case Timeframe.LAST_24_HOURS:
      return new Period(dayjs().utc().subtract(24, 'hours').unix(), now)
    case Timeframe.LAST_7_DAYS:
      return new Period(dayjs().utc().subtract(7, 'days').unix(), now)
    case Timeframe.LAST_30_DAYS:
      return new Period(dayjs().utc().subtract(30, 'days').unix(), now)
    case Timeframe.LAST_90_DAYS:
      return new Period(dayjs().utc().subtract(90, 'days').unix(), now)
    default:
      throw new Error("Invalid timeframe input.");
  }
})

onMounted(() => {
  watch(period, (selection: Period) => {
    emit('select', selection);
  }, { immediate: true });
});

const emit = defineEmits<{
  (e: 'select', payload: Period): void
}>();
</script>

<style scoped>

</style>