<script setup>
import { ref } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";

function getLastDayOfMonth(year, month) {
  // Create a date for the next month, day 0
  return new Date(year, month + 1, 0).getDate();
}

const buttons = [
  {
    text: 'Today',
    action: () => {
      const date = new Date();
      SessionUser.adminUser.statistics.query.set.start(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
      SessionUser.adminUser.statistics.query.set.end(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
    }
  },
  {
    text: 'This month',
    action: () => {
      SessionUser.adminUser.statistics.query.set.start(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01');
      SessionUser.adminUser.statistics.query.set.end(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + getLastDayOfMonth(new Date().getFullYear(), new Date().getMonth()));
    }
  },
  {
    text: 'Last month',
    action: () => {
      const date = new Date();
      SessionUser.adminUser.statistics.query.set.start(date.getFullYear() + '-' + date.getMonth() + '-01');
      SessionUser.adminUser.statistics.query.set.end(date.getFullYear() + '-' + date.getMonth() + '-' + getLastDayOfMonth(date.getFullYear(), date.getMonth() - 1));
    }
  },
  {
    text: 'This year',
    action: () => {
      const date = new Date();
      SessionUser.adminUser.statistics.query.set.start(date.getFullYear() + '-01-01');
      SessionUser.adminUser.statistics.query.set.end(date.getFullYear() + '-12-31');
    },
  },
  {
    text: 'Last year',
    action: () => {
      const date = new Date();
      SessionUser.adminUser.statistics.query.set.start((date.getFullYear() - 1) + '-01-01');
      SessionUser.adminUser.statistics.query.set.end((date.getFullYear() - 1) + '-12-31');
    },
  }
]
</script>

<template>
  <div>
    <p>Viser statistikker fra: {{ SessionUser.adminUser.statistics.query.start }} til {{ SessionUser.adminUser.statistics.query.end }}</p>
    <div class="buttons mt-4 mb-4">
      <button class="button" v-for="button in buttons"
              @click="button.action"
      >{{ button.text }}</button>
    </div>
    <!-- Select view -->
    <div class="select">
      <select @change="SessionUser.adminUser.statistics.set_view($event.target.value)">
        <option v-for="object in SessionUser.adminUser.statistics.views" :key="object" :value="object.id">
          {{ object.name }}
        </option>
      </select>
    </div>
  </div>
</template>

<style scoped>

</style>