<script setup>
import { ref, defineProps } from "vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { Colors } from "@/ThemeConfig.vue";
import { selected_department_id, selected_date, onChangeCall } from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
import DepartmentDashboardDailyReportCount from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue";

const props = defineProps({
  product_id: {
    type: Number,
    default: null
  },
  color: {
    type: String,
    default: Colors.global.primaryColor
  }
});

const generateTitle = () => {
  return product_name.value;
};

const generateSubtitle = () => {
  return "Dagens salg af produktet";
};

const generateCount = () => {
  return product_count.value;
};

const generateIcon = () => {
  return "fas fa-shopping-cart";
};

const generateColor = () => {
  return props.color;
};

const product_name = ref(null);
const get_product_name = async () => {
  await SessionUser.objects.products.get.single(props.product_id)
    .then(response => {
      product_name.value = response.name;
    });
};

get_product_name();

const product_count = ref(null);
const product_out_of = ref(null);
const get_product_count = async () => {
  await SessionUser.objects.department_daily_reports.functions.getProductCount(
      selected_department_id.value,
      props.product_id,
      selected_date.value
  )
    .then(response => {
      product_count.value = response.data.data.quantity;
      product_out_of.value = response.data.data.out_of;
    });
};
get_product_count();

// Update the product count when the selection changes
onChangeCall(() => {
  get_product_count();
});
</script>

<template>
  <DepartmentDashboardDailyReportCount
    :title="product_name"
    :subtitle="generateSubtitle()"
    :count="generateCount()"
    :out_of="product_out_of"
    :icon="generateIcon()"
    :color="generateColor()"
    >

  </DepartmentDashboardDailyReportCount>
</template>

<style scoped>

</style>