<script setup>
import {ref, watch} from 'vue';
import { useRouter } from 'vue-router';
import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";

const router = useRouter();

const modules = [
  {
    id: 1,
    name: "Kassesystem",
    description: "Gå til kassesystemet",
    icon: "fas fa-book",
    onClick: () => {
      // Get the departmentId from the URL
      const departmentId = router.currentRoute.value.params.departmentId;
      // Redirect to the POS system
      router.push(`/admin/${departmentId}/modules/pos`);
    },
    onClickCount: () => {
      this.onClick();
    },
    count: ref(0)
  },
  {
    id: 2,
    name: "Bookinger",
    description: "Gå til bookinger",
    icon: "fas fa-calendar-alt",
    onClick: () => {
      // Get the departmentId from the URL
      const departmentId = router.currentRoute.value.params.departmentId;
      // Redirect to the bookings
      router.push(`/admin/${departmentId}/modules/bookings`);
    },
    onClickCount: () => {
      // Get the departmentId from the URL
      const departmentId = router.currentRoute.value.params.departmentId;
      // Redirect to the bookings
      router.push(`/admin/${departmentId}/modules/bookings?search=pending`);
    },
    count: ref(0)
  },
  {
    id: 3,
    name: "Dagsopgørelse",
    description: "Gå til dagsopgørelse og regnskab",
    icon: "fas fa-book",
    onClick: () => {
      // Get the departmentId from the URL
      const departmentId = router.currentRoute.value.params.departmentId;
      // Redirect to the POS system
      router.push(`/admin/${departmentId}/modules/daily-report`);
    },
    onClickCount: () => {
      this.onClick();
    },
    count: ref(0)
  },
  {
    id: 4,
    name: "Notifikationer",
    description: "Gå til notifikationer",
    icon: "fas fa-bell",
    onClick: () => {
      // Get the departmentId from the URL
      const departmentId = router.currentRoute.value.params.departmentId;
      // Redirect to the notifications
      router.push(`/admin/${departmentId}/modules/notifications`);
    },
    onClickCount: () => {
      this.onClick();
    },
    count: ref(0)
  },
  {
    id: 5,
    name: "Tidsbookinger",
    description: "Gå til tidsbookinger",
    icon: "fas fa-clock",
    onClick: () => {
      // Get the departmentId from the URL
      const departmentId = router.currentRoute.value.params.departmentId;
      // Redirect to the time bookings
      router.push(`/admin/${departmentId}/modules/time-bookings`);
    },
    onClickCount: () => {
      this.onClick();
    },
    count: ref(0)
  }
];

// Get the departmentId from the URL
const getDepartmentId = () => {
  return parseInt(router.currentRoute.value.params.departmentId);
};

// Get today's bookings
const getTodaysBookings = async () => {
  // Return, if the departmentId is not set
  if (!getDepartmentId()) {
    return;
  }
  const response = await authenticatedRequest('/admin/bookings/department/count?department_id=' + getDepartmentId(),
      'GET', {
    department_id: getDepartmentId()
  });
  modules[1].count.value = response.data.data.message;
};


// Get the bookings
getTodaysBookings();

// Watch the departmentId
watch(() => router.currentRoute.value.params.departmentId, () => {
  getTodaysBookings();
});

// Update the bookings every 30 seconds
setInterval(() => {
  getTodaysBookings();
}, 30000);
</script>

<template>
  <div class="columns is-multiline">
    <div class="column is-4" v-for="module in modules" :key="module.id">
      <div class="card is-clickable" @click="module.onClick">
        <header class="card-header">
          <div class="card-header-icon">
            <span class="icon">
              <i :class="module.icon"></i>
            </span>
          </div>
          <p class="card-header-title">{{ module.name }}</p>
          <div class="is-pulled-right">
            <span class="button is-small is-dark" @click="module.onClickCount" v-if="module.count.value > 0">{{ module.count.value }}</span>
          </div>
        </header>
        <div class="card-content">
          <p class="title">{{ module.name }}</p>
          <p class="subtitle">{{ module.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>