<script setup>

import DepartmentDashboardHero from "@/views/dashboards/departmentDashboard/DepartmentDashboardHero.vue";
import PosDepartmentMVP from "@/components/displays/department/pos/PosDepartmentMVP.vue";
import DepartmentPosNavigation from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosNavigation.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
import DepartmentDashboardDailyReportCount from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue";
import {ref} from "vue";
import { useRouter } from "vue-router";
import DepartmentDashboardDailyReportProductSales
  from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue";
import DepartmentDashboardDailyReportTodayForm
  from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportTodayForm.vue";
import { Colors } from "@/ThemeConfig.vue";
import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
import DepartmentDashboardDailyReportNavigation from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue";
import {selected_date, date_shortcuts, selectDate, count_transactions, count_products_sold, selected_department_id, selectDepartment, count_earnings} from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
import DepartmentDashboardDailyReportHistory
  from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportHistory.vue";

/**
 * Get the current date
 * @returns {string} The current date (YYYY-MM-DD)
 */
const getDate = () => {
  return selected_date.value;
};

// Get the department ID from the route
const router = useRouter();
const department_id = ref(parseInt(router.currentRoute.value.params.departmentId));
console.log(department_id.value);

selectDepartment(parseInt(department_id.value));

const reports = ref([
  {
    title: 'Transaktioner',
    subtitle: 'Dagens transaktioner',
    count: count_transactions,
    icon: 'fas fa-exchange-alt',
    color: Colors.global.primaryColor,
    buttons: [],
    labels: {
      out_of: 'Mulige transaktioner',
      out_of_suffix: null,
      quantity: 'Antal transaktioner',
      quantity_suffix: null
    }
  },
  {
    title: 'Produkter solgt',
    subtitle: 'Dagens produkter solgt',
    count: count_products_sold,
    icon: 'fas fa-shopping-cart',
    color: Colors.global.primaryColor,
    buttons: [],
    labels: {
      out_of: 'Mulige solgte',
      out_of_suffix: '',
      quantity: 'Solgte',
      quantity_suffix: ''
    }
  },
  {
    title: 'Omsætning',
    subtitle: 'Dagens omsætning',
    count: count_earnings,
    icon: 'fas fa-money-bill-wave',
    color: Colors.global.primaryColor,
    buttons: [],
    parseFunction: (value) => {
      return SessionUser.functions.currency.toLocal(value);
    },
    labels: {
      out_of: 'Mulige omsætning',
      out_of_suffix: 'kr.',
      quantity: 'Omsætning',
      quantity_suffix: ''
    }
  },
]);

const product_ids = ref([
    /** Add the product IDs here */
    // Undervognsskyld pr. enhed
    {
      id: 21,
      out_of: 100,
    },
    // Spot Free (Varevogn)
    {
      id: 23,
      out_of: 100,
    },
    // Spot Free (Lastbil)
    {
      id: 24,
      out_of: 100,
    },
    // Fælg flex pr. enhed
    {
      id: 25,
      out_of: 100,
    },
]);

</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
    <DepartmentDashboardPageWrapper
        title="Dagsopgørelse"
        subtitle="Få et overblik over dagens omsætning, forbrug og bookinger"
    >
      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
        <!-- At the top of the page, we want to have a button that allows the user to create a new daily report -->
        <div class="columns is-multiline">
          <!-- Display the navigation -->
          <div class="column is-12">
            <DepartmentDashboardDailyReportNavigation />
          </div>
          <!-- Display the daily report product sales -->
          <div class="column is-4" v-for="product in product_ids" :key="product.id">
            <DepartmentDashboardDailyReportProductSales
                :product_id="product.id"
                :date="getDate()"
                :department_id="department_id"
                :color="Colors.global.primaryColor"
            />
          </div>
          <!-- Display the daily report counts -->
          <div class="column is-4" v-for="report in reports" :key="report.title">
            <DepartmentDashboardDailyReportCount
                :title="report.title"
                :subtitle="report.subtitle"
                :count="report.count"
                :icon="report.icon"
                :color="report.color"
                :buttons="report.buttons"
                :label_out_of="report.labels.out_of"
                :label_out_of_suffix="report.labels.out_of_suffix"
                :label_quantity="report.labels.quantity"
                :label_quantity_suffix="report.labels.quantity_suffix"
                v-bind:parseFunction="report.parseFunction ? report.parseFunction : (value) => { return value; }"
            />
          </div>
        </div>
        <ElementTabsBox
            class="mb-6"
            default-active-tab="tab1"
            :allow-compact-when-one-tab="true"
            :tabs="[
              {
                name: SessionUser.functions.date.isToday(selected_date) ? 'Dagens rapport' : 'Tidligere rapport',
                slot: 'form',
                icon: 'fas fa-newspaper',
                hidden: () => {
                  return !SessionUser.canAccessDepartment(department_id);
                }
              },
              {
                name: 'Historik',
                slot: 'history',
                icon: 'fas fa-history',
                hidden: () => {
                  return !SessionUser.canAccessDepartment(department_id);
                }
              }
            ]">
          <template #form>
            <!-- Form to create a new daily report -->
            <DepartmentDashboardDailyReportTodayForm
                :department_id="department_id"
                :date="getDate()"
            />
          </template>
          <!-- Display the daily report product sales -->
          <template #history>
            <DepartmentDashboardDailyReportHistory/>
          </template>
        </ElementTabsBox>
      </NotFoundFallBackPageWrapper>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>