<script setup>
import { ref, defineProps, watch } from 'vue';
import { SessionUser } from '@/components/session/token/SessionUser.vue';
import { show_this_week } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
import DepartmentDashboardOverviewNavigation
  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue";

const props = defineProps({
  departments: {
    type: Array,
    default: [],
    required: true
  },
});

/** Define the variables */
const income = ref(0);
const sales = ref(0);
const transactions = ref(0);

/** Get the dates in the current week */
const getDatesThisWeek = () => {
  const dates = [];
  const today = new Date();
  // If only today, return today
  if (show_this_week.value === false) {
    dates.push(today.toISOString().split('T')[0]);
    return dates;
  }
  const day = today.getDay();
  const diff = today.getDate() - day + (day === 0 ? -6 : 1); // adjust when day is sunday
  const monday = new Date(today.setDate(diff));
  for (let i = 0; i < 7; i++) {
    const date = new Date(monday);
    date.setDate(monday.getDate() + i);
    dates.push(date.toISOString().split('T')[0]);
  }
  return dates;
};

/** Fetch the transactions for the current week */
const getTransactionsThisWeek = async () => {
  // If the department ID is not set, return
  if (!props.departments) {
    return;
  }
  // Reset the values
  income.value = 0;
  sales.value = 0;
  transactions.value = 0;
  const dates = getDatesThisWeek();
  for (const department of props.departments) {
    for (const date of dates) {
      console.log(department, date);
      await SessionUser.objects.department_daily_reports.functions.getTransactionCount(department, date)
        .then(response => {
          sales.value += response.data.data.products ?? 0;
          income.value += response.data.data.earnings ?? 0;
          transactions.value += response.data.data.quantity ?? 0;
        });
    }
  }
  console.log(sales.value, income.value, transactions.value);
};

getTransactionsThisWeek();

// Watch the only_today prop
watch(() => show_this_week.value, () => {
  getTransactionsThisWeek();
});

console.log((getDatesThisWeek()));
</script>

<template>
  <div class="columns is-multiline is-vcentered">
    <!-- Navigation -->
    <div class="column is-12">
      <DepartmentDashboardOverviewNavigation/>
    </div>
    <!-- Income -->
    <div class="column is-4">
      <div class="box">
        <p class="subtitle is-6">Omsætning {{ !show_this_week ? 'i dag' : 'denne uge' }}</p>
        <p class="title is-4">{{ SessionUser.functions.currency.toLocal(income) }}</p>
      </div>
    </div>
    <!-- Gns. pr. enhed -->
    <div class="column is-4">
      <div class="box">
        <p class="subtitle is-6">Gns. pr. enhed {{ !show_this_week ? 'i dag' : 'denne uge' }}</p>
        <p class="title is-4">{{ SessionUser.functions.currency.toLocal(income / transactions) }}</p>
      </div>
    </div>
    <!-- Transactions -->
    <div class="column is-4">
      <div class="box">
        <p class="subtitle is-6">Enheder {{ !show_this_week ? 'i dag' : 'denne uge' }}</p>
        <p class="title is-4">{{ transactions }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>