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

const props = defineProps({
  department_id: {
    type: Number,
    default: null,
    required: true
  },
  options: {
    type: Object,
    default: {},
  }
});
/**
 * Define the default options
 */
const default_options = {
  show_department_name: true,
};

const getOptions = () => {
  return {
    ...default_options,
    ...props.options ?? {}
  };
};

/** Define the variables */
const department = ref({});
const bookings_count = ref({
  completed: null,
  pending: null,
  cancelled: null,
  today: null,
});
// Get the transactions for the current day
const getBookings = async () => {
  // If the department ID is not set, return
  if (!props.department_id) {
    return;
  }
  console.log('Getting bookings for department', props.department_id);

  // Reset the values
  const default_value = {
    completed: 0,
    pending: 0,
    cancelled: 0,
    today: 0
  };
  let result = {
    ...default_value,
  }
  SessionUser.objects.department_daily_reports.functions.getDepartmentDailyBookingReport(
      props.department_id,
      getDate()
  ).then((response) => {
    // Set the values
    let data = response.data.data;
    result = {
      ...default_value,
      ...data
    };
    // Save the values
    bookings_count.value = result;
  });
};

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

// 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 department
getDepartment().then(
  () => getBookings()
)


</script>

<template>
  <div class="columns is-vcentered">
    <!-- Name -->
    <div class="column is-narrow">
      <h3
          class="title is-5"
          v-show="getOptions().show_department_name"
      >{{ department.name }}</h3>
    </div>
    <div class="column">
      <div class="columns is-vcentered">
        <!-- Total count -->
        <div class="column is-narrow is-2 has-text-centered is-offset-6">
          <h3 class="title is-5">{{ bookings_count.completed }}</h3>
          <h6 class="subtitle is-6">{{SessionUser.objects.global.language.completed}}</h6>
        </div>
        <!-- Pending count -->
        <div class="column is-narrow is-2 has-text-centered">
          <h3 class="title is-5">{{ bookings_count.pending }}</h3>
          <h6 class="subtitle is-6">{{SessionUser.objects.global.language.pending}}</h6>
        </div>
        <!-- Cancelled count -->
        <div class="column is-narrow is-2 has-text-centered">
          <h3 class="title is-5">{{ bookings_count.cancelled }}</h3>
          <h6 class="subtitle is-6">{{SessionUser.objects.global.language.cancelled}}</h6>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>