<template>
    <UiInput class="timeframe">
        <select name="" id="" v-model="timeframe">
        <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 dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';

const enum Timeframe 
{
  LAST_HOUR = "LAST_HOUR",
  LAST_3_HOURS = "LAST_3_HOURS",
  LAST_6_HOURS = "LAST_6_HOURS",
  LAST_12_HOURS = "LAST_12_HOURS",
  TODAY = "TODAY",
  LAST_24_HOURS = "LAST_24_HOURS",
  LAST_7_DAYS = "LAST_7_DAYS",
  LAST_30_DAYS = "LAST_30_DAYS",
  LAST_90_DAYS = "LAST_90_DAYS"
}

const timeframe: Ref<string | undefined> = ref(Timeframe.LAST_HOUR);

const emits = defineEmits<{ 
    (e: 'update:modelValue', value?: Date): void 
}>();

const startTime = computed(() => {
  dayjs.extend(utc)
  switch (timeframe.value)
  {
    case Timeframe.LAST_HOUR: {
      return dayjs().utc().subtract(1, 'hours');
    }
    case Timeframe.LAST_3_HOURS: {
      return dayjs().utc().subtract(3, 'hours');
    }
    case Timeframe.LAST_6_HOURS: {
      return dayjs().utc().subtract(6, 'hours');
    }
    case Timeframe.LAST_12_HOURS: {
      return dayjs().utc().subtract(12, 'hours');
    }
    case Timeframe.LAST_24_HOURS: {
      return dayjs().utc().subtract(24, 'hours');
    }
    case Timeframe.LAST_7_DAYS: {
      return dayjs().utc().subtract(7, 'days');
    }
    case Timeframe.LAST_30_DAYS: {
      return dayjs().utc().subtract(30, 'days');
    }
    case Timeframe.LAST_90_DAYS: {
      return dayjs().utc().subtract(90, 'days');
    }
  }
})

watch(startTime, (startTime) => {
    emits('update:modelValue', startTime?.toDate());
}, { immediate: true });
</script>