<script setup>
import { ref, watch } from 'vue';
import { getUserDiscounts, user_discounts, customer_id } from "@/components/shop/POSDepartmentProcess.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

// The discounts
const discounts = ref([]);
// The sorted discounts
const sorted_discounts = ref([]);
// Check if a customer is selected
const isCustomerSelected = ref(false);


const onCustomerChange = () => {
  if (parseInt(customer_id.value) > 0) {
    getUserDiscounts(customer_id.value).then((discounts_res) => {
      console.log(discounts_res);
      // Set the discounts
      discounts.value = discounts_res;
    });
    isCustomerSelected.value = true;
    return;
  }
  isCustomerSelected.value = false;
}

const parseValue = (value) => {
  let tmp_value = parseFloat(value).toFixed(2);
  // Add the percentage sign
  return `${tmp_value}%`;
}

const parseDiscountDisplayName = (discount) => {
  // Check if the discount is a global discount
  if (discount.product_or_category_id === 'global') {
    return 'E-conomic rabatsats';
  }
  // Check if the discount is a category discount
  if (discount.is_category === '1') {
    // Get the category name
    return SessionUser.objects.categories.functions.getCategoryName(discount.product_or_category_id);
  }
  // Otherwise, it's a product discount
  return SessionUser.objects.products.functions.getProductName(discount.product_or_category_id);
}

const sortDiscounts = () => {
  const tmp_sorted = [];
  // There is technically only one global discount, but to remain consistent with the other discounts, we'll filter it out.
  const global_discounts = discounts.value.filter((discount) => discount.product_or_category_id === 'global');
  // Category discounts
  const category_discounts = discounts.value.filter((discount) => discount.is_category === '1' && discount.product_or_category_id !== 'global');
  // Product discounts
  const product_discounts = discounts.value.filter((discount) => discount.is_category === '0');

  // Add the global discount first
  tmp_sorted.push(...global_discounts);
  tmp_sorted.push(...category_discounts);
  tmp_sorted.push(...product_discounts);

  // Update the discounts
  sorted_discounts.value = tmp_sorted;
}

watch(discounts, sortDiscounts, { immediate: true });
watch(customer_id, onCustomerChange, { immediate: true });
</script>

<template>
  <div v-if="isCustomerSelected" style="width: 100%;">
    <div class="columns is-vcentered" v-for="discount in sorted_discounts" :key="discount.id">
      <div class="column is-8">
        <span class="is-flex-wrap-nowrap">
          {{ parseDiscountDisplayName(discount) }}
        </span>
      </div>
      <div class="column is-4 has-text-right is-float-right">
        <!--<span class="icon is-small mr-1">
          <i class="fas fa-percent" aria-hidden="true"></i>
        </span> -->
        <span>{{ parseValue(discount.percentage) }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>