<script setup>
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";

defineProps(['objects']);
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
import { showEditProductForm } from "@/components/forms/superUser/editProductForm.vue";
import { loadList } from "@/components/pagination/paginatedList.vue";
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";



// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}

import { SessionUser } from "@/components/session/token/SessionUser.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";

const redirect = (path) => {
  window.location = path;
}
const categories_cache = ref(null);
const getCategoryName = (id) => {
  if (categories_cache.value === null) {
    categories_cache.value = [];
    SessionUser.objects.categories.get.all().then((categories) => {
      categories_cache.value = categories;
    });
  }
  const category = categories_cache.value.find((category) => category.id === id);
  return category ? category.name : SessionUser.objects.global.language.no_data;
}

const getProductOptionNames = (id) => {
  const product_options = getProductOptions(id);
  // Get the product names from the product option_ids
  for (let i = 0; i < product_options.length; i++) {
    const product_option = product_options[i];
    product_option.name = getProductName(product_option);
  }
  return product_options.map((product_option) => product_option.name).join(", ");
  //return product_options.map((product_option) => product_option.option_id).join(", ");
}

const product_options_cache = ref(null);
const getProductOptions = (product) => {
  if (product_options_cache.value === null) {
    product_options_cache.value = [];
    SessionUser.objects.product_options.get.all().then((product_options) => {
      product_options_cache.value = product_options;
    });
  }
  // Find all the product options that match the product id, and return them

  return product_options_cache.value.filter((product_option) => product_option.product_id === product.id);
}

const product_cache = ref(null);
const getProductName = (product_option) => {
  if (product_cache.value === null) {
    product_cache.value = [];
    SessionUser.objects.products.get.all().then((products) => {
      product_cache.value = products;
    });
  }
  const product = product_cache.value.find((product) => product.id === product_option.option_id);
  return product ? product.name : SessionUser.objects.global.language.no_data;
}

const getDisplayProductAddons = (product) => {
  const product_options = getProductOptions(product);
  let html = "";
  // Get the product names from the product option_ids
  for (let i = 0; i < product_options.length; i++) {
    const product_option = product_options[i];
    product_option.name = getProductName(product_option);
  }
  if (product_options.length > 0) {
    for (let i = 0; i < product_options.length; i++) {
      const product_option = product_options[i];
      html += product_option.name;
      if (i < product_options.length - 1) {
        html += ", ";
      }
    }
  } else {
    html = SessionUser.objects.global.language.no_data;
  }
  return html;
}


</script>

<template>
  <table class="table is-fullwidth is-hoverable is-striped">
    <thead>
    <tr>
      <th>{{ SessionUser.objects.products.columns.id.label }}</th>
      <th>{{ SessionUser.objects.products.columns.name.label }}</th>
      <th>{{ SessionUser.objects.products.columns.description.label }}</th>
      <th>{{ SessionUser.objects.products.columns.price.label }}</th>
      <th>{{ SessionUser.objects.products.columns.subscription_allowed.label }}</th>
      <th>{{ SessionUser.objects.products.columns.category.label }}</th>
      <th>{{ SessionUser.objects.products.columns.piktogram.label }}</th>
      <th>{{ SessionUser.objects.products.columns.economic_product_id.label }}</th>
      <th>{{ SessionUser.objects.products.columns.apply_category_discount.label }}</th>
      <th>{{ SessionUser.objects.products.columns.requires_note.label }}</th>
      <th>{{ SessionUser.objects.product_options.meta.title }}</th>
      <th>{{ SessionUser.objects.global.language.actions }}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="product in objects" :key="product.id">
      <td>{{ product.id }}</td>
      <!-- Name -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="name"
      />
      <!-- Description -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="description"
      />
      <!-- Price -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="price"
      />
      <!-- Subscription allowed -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="subscription_allowed"
          :parseFunction="value => value ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no"
      />
      <!-- Category -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="category"
          :parse-function="value => getCategoryName(value)"
      />
      <!-- Piktogram -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="piktogram"
      />
      <!-- Economic product id -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="economic_product_id"
          :parse-function="value => {
            if (value === 0) {
              return SessionUser.objects.global.language.no_data;
            }
            return  SessionUser.objects.economic_products.functions.getEconomicProductName(value)
          }"
      />
      <!-- Apply category discount -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="apply_category_discount"
          :parseFunction="value => value ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no"
      />
      <!-- Requires note -->
      <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="SessionUser.objects.products.showEditObjectFieldForm"
          column="requires_note"
          :parseFunction="value => value ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no"
      />
      <!-- Tilvalg -->
        <EditableTableColumn
          :object="product"
          :loadList="loadList"
          :editFunction="() => SessionUser.functions.redirectTo.superUser('/products/' + product.id)"
          :virtualColumn="true"
          :parse-function="value => getDisplayProductAddons(value)"
        />
      <!-- Actions -->
      <td class="is-narrow has-text-right">
        <ActionSettingsWheelButton>
          <template #actions>
            <ActionSettingsWheelItem
              label="Gå til produkt"
              icon="fas fa-eye"
              @click="redirect(`/superuser/products/${product.id}`)"
              template="default"
            />
          </template>
        </ActionSettingsWheelButton>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<style scoped>

</style>