<script setup>
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
import {getCustomerName} from "@/components/shop/POSDepartmentProcess.vue";

const props = defineProps(
    {
        product_id: {
            type: Number,
            default: null
        },
        objects: {
            type: Array,
            required: true
        },
        hideProductColumn: {
            type: Boolean,
            default: false
        }
    }
);
import { ref } from 'vue';
import { loadList } from "@/components/pagination/paginatedList.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";

const redirect = (path) => {
  window.location = path;
}

const productNames = ref([]);
const isLoading = ref(false);

const getProductNames = (id) => {
  // Get the product name from the product id
  if (productNames.value.length === 0) {
    SessionUser.objects.products.get.all().then((products) => {
      productNames.value = products;
    });
  }
  const product = productNames.value.find((product) => product.id === parseInt(id));
  return product ? product.name : SessionUser.objects.global.language.no_data;
}

getProductNames();

const lockedValuesOnCreate = ref({});

// Check if the product_id is set
if (props.product_id !== null) {
  lockedValuesOnCreate.value = {
    product_id: props.product_id
  };
}

</script>

<template>
    <table class="table is-fullwidth is-hoverable is-striped">
      <thead>
      <tr>
        <th>{{ SessionUser.objects.product_options.columns.id.label }}</th>
        <th>{{ SessionUser.objects.product_options.columns.name.label }}</th>
        <th>{{ SessionUser.objects.product_options.columns.min.label }}</th>
        <th>{{ SessionUser.objects.product_options.columns.max.label }}</th>
        <th>{{ SessionUser.objects.product_options.columns.option_id.label }}</th>
        <th v-if="!props.hideProductColumn">{{ SessionUser.objects.product_options.columns.product_id.label }}</th>
        <th><!-- Actions --></th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="object in objects" :key="object.id">
        <td>{{ object.id }}</td>
        <!-- Name -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            :editFunction="SessionUser.objects.product_options.showEditObjectFieldForm"
            column="name"
            :parse-function="(value) => {
              // If the value is empty, return the option name
              if (!value) {
                return SessionUser.objects.products.functions.getProductName(object.option_id);
              }
              // Otherwise, return the value itself
              return value;
            }"
        />
        <!-- Min -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            :editFunction="SessionUser.objects.product_options.showEditObjectFieldForm"
            column="min"
            :parse-function="(value) => {
              // If the value is empty, return the default value
              if (!value) {
                return SessionUser.objects.global.language.no_data;
              }
              // Otherwise, return the value itself
              return value;
            }"
        />
        <!-- Max -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            :editFunction="SessionUser.objects.product_options.showEditObjectFieldForm"
            column="max"
            :parse-function="(value) => {
              // If the value is empty, return the default value
              if (!value) {
                return SessionUser.objects.global.language.no_data;
              }
              // Otherwise, return the value itself
              return value;
            }"
        />
        <!-- Option ID -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="option_id"
            :parse-function="(value) => {
              return getProductNames(value);
            }"
        />
        <!-- Product ID -->
        <EditableTableColumn
            v-if="!props.hideProductColumn"
            :object="object"
            :loadList="loadList"
            column="product_id"
        />
        <!-- Actions -->
        <td>
          <ActionSettingsWheelButton>
            <template #actions>
              <ActionSettingsWheelItem
                icon="fas fa-trash"
                @click="SessionUser.objects.product_options.delete(object.id).then(() => loadList())"
                label="Slet"
                template="danger"
              />
            </template>
          </ActionSettingsWheelButton>
        </td>
      </tr>
      <!-- Add a row for creating a new object -->
      <tr @click="SessionUser.objects.product_options.showCreateObjectForm(() => loadList(), lockedValuesOnCreate)" class="is-clickable">
        <td colspan="9">
          <button class="button is-text is-small" style="text-decoration-line: none">
            <span>Opret {{ SessionUser.objects.product_options.meta.labels.single }}</span>
          </button>
        </td>
      </tr>
      <!-- If the list is empty -->
      <tr v-if="objects.length === 0">
        <td colspan="9">
          Ingen {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }} fundet
        </td>
      </tr>
      <!-- Show a count of the total number of objects -->
      <tr>
        <td colspan="9">Viser {{ objects.length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}</td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>