<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";

const props = defineProps({
  department_id: {
    type: Number,
    default: null,
    required: true
  },
});


// Parser for economic values
const economicParser = new Intl.NumberFormat('da-DK', {
  style: 'currency',
  currency: 'DKK'
});

// Get the current date
const getDate = () => {
  const date = new Date();
  return date.toISOString().split('T')[0];
};

// Define the variables
const department = ref({});
const isCollapsed = ref(true);
const earnings = ref(0);
const sales = 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) {
    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;
};

// Get the department
const getDepartment = async () => {
  // Get the department
  await SessionUser.objects.departments.get.single(props.department_id).then((response) => {
    department.value = response;
  });
};

// Get the transactions for the current day
const getTransactions = async () => {
  // If the department ID is not set, return
  if (!props.department_id) {
    return;
  }
  // Reset the values
  sales.value = 0;
  earnings.value = 0;
  // Update the dates
  const dates = getDatesThisWeek();
  // Get the transactions
  for (const date of dates) {
    await SessionUser.objects.department_daily_reports.functions.getTransactionCount(props.department_id, date)
      .then(response => {
        sales.value += response.data.data.quantity;
        earnings.value += response.data.data.earnings ?? 0;
      });
  }
};

// Get the department
getDepartment().then(
  () => getTransactions()
)

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

</script>

<template>
  <div class="columns is-vcentered">
    <!-- Name -->
    <div class="column is-6">
      <h3 class="title is-5">{{ department.name }}</h3>
    </div>
    <!-- Sales -->
    <div class="column is-2 has-text-centered">
      <h3 class="title is-5">{{ sales }}</h3>
      <h6 class="subtitle is-6">Enheder</h6>
    </div>
    <!-- Income per sale -->
    <div class="column is-2 has-text-centered">
      <h3 class="title is-5">{{ earnings > 0 ? economicParser.format(earnings / sales) : economicParser.format(0) }}</h3>
      <h6 class="subtitle is-6">Gns. pr. enhed</h6>
    </div>
    <!-- Total income -->
    <div class="column is-2 has-text-centered">
      <h3 class="title is-5">{{ economicParser.format(earnings) }}</h3>
      <h6 class="subtitle is-6">Omsætning</h6>
    </div>
  </div>
</template>

<style scoped>

</style>