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

const props = defineProps({
  orderId: {
    type: Number,
    required: true,
  },
  displayPrice: {
    type: Boolean,
    default: true,
  },
  displayReference: {
    type: Boolean,
    default: true,
  },
  displayNotes: {
    type: Boolean,
    default: true,
  },
  useLocalOrderItems: {
    type: Boolean,
    default: false,
  },
  localOrderItems: {
    type: Array,
    default: () => [],
  },
})

const order_item_default = {
  "id": null,
  "order_id": null,
  "product_id": null,
  "reference": null,
  "notes": null,
  "cashier_id": null,
  "price": null,
  "quantity": null,
  "related_item_id": null,
  "product": {
    "id": null,
    "name": null,
    "description": null,
    "price": null,
    "category": null,
    "piktogram": null,
    "economic_product_id": null,
    "apply_category_discount": null,
    "requires_note": null,
    "created_at": null,
    "updated_at": null
  }
};

const orderItems = ref([]);

const loadOrderItems = async () => {
  if (props.useLocalOrderItems) {
    orderItems.value = props.localOrderItems;
    return;
  }
  await SessionUser.request(
      '/order/items',
      'GET',
      {
        order_id: props.orderId,
      }
  ).then((response) => {
    console.log(response.data.data);
    orderItems.value = response.data.data;
  }).catch((error) => {
    console.error(error);
  });
}

const isOrderItemAddon = (item) => {
  return item.related_item_id !== 0;
}

const getItemAddons = (item) => {
  return orderItems.value.filter((order_item) => {
    return order_item.related_item_id === item.id;
  });
}

const ucFirst = (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

loadOrderItems();

watch(() => props.orderId, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    loadOrderItems();
  }
}, { immediate: true });
</script>

<template>
  <div>
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>{{ucFirst(SessionUser.objects.products.meta.labels.single)}}</th>
          <th v-if="props.displayNotes">{{ucFirst(SessionUser.objects.orders.columns.notes.label)}}</th>
          <th v-if="props.displayReference">{{ucFirst(SessionUser.objects.orders.columns.reference.label)}}</th>
          <th>{{ucFirst(SessionUser.objects.global.language.quantity)}}</th>
          <th v-if="props.displayPrice">{{ucFirst(SessionUser.objects.products.columns.price.label)}}</th>
        </tr>
      </thead>
      <tbody>
      <template v-for="item in orderItems" :key="item.id">
        <!-- If the item is a primary item, show it -->
        <template v-if="!isOrderItemAddon(item)">
          <!-- If the item is included in the invoice, show it normally -->
          <tr v-if="item.include_in_invoice">
            <td>{{ item.product.name }}</td>
            <td v-if="props.displayReference">{{ item.reference }}</td>
            <td v-if="props.displayNotes">{{ item.notes }}</td>
            <td>{{ item.quantity }}</td>
            <td v-if="props.displayPrice">{{ SessionUser.functions.currency.toLocal(item.price) }}</td>
          </tr>
          <!-- If the item is not included in the invoice, show it with a strikethrough -->
          <tr v-else  class="has-background-warning-light">
            <td><span style="text-decoration: line-through;">{{ item.product.name }}</span> ( {{SessionUser.objects.vehicles.columns.wash_subscription.label }} )</td>
            <td v-if="props.displayReference">{{ item.reference }}</td>
            <td v-if="props.displayNotes">{{ item.notes }}</td>
            <td>{{ item.quantity }}</td>
            <td v-if="props.displayPrice" style="text-decoration: line-through;">{{ SessionUser.functions.currency.toLocal(item.price) }}</td>
          </tr>
        </template>
        <!-- Show the add-on items -->
        <template v-for="addon_item in getItemAddons(item)" :key="addon_item.id">
          <!-- If the add-on item is included in the invoice, show it normally -->
          <tr v-if="addon_item.include_in_invoice">
            <td>+ {{ addon_item.product.name }}</td>
            <td v-if="props.displayReference">{{ addon_item.reference }}</td>
            <td v-if="props.displayNotes">{{ addon_item.notes }}</td>
            <td>{{ addon_item.quantity }}</td>
            <td v-if="props.displayPrice">{{ SessionUser.functions.currency.toLocal(addon_item.price) }}</td>
          </tr>
          <!-- If the add-on item is not included in the invoice, show it with a strikethrough -->
          <tr v-else class="has-background-warning">
            <td>+ <span style="text-decoration: line-through;">{{ addon_item.product.name }}</span> ( {{SessionUser.objects.vehicles.columns.wash_subscription.label }} )</td>
            <td v-if="props.displayReference">{{ addon_item.reference }}</td>
            <td v-if="props.displayNotes">{{ addon_item.notes }}</td>
            <td>{{ addon_item.quantity }}</td>
            <td v-if="props.displayPrice" style="text-decoration: line-through;">{{ SessionUser.functions.currency.toLocal(addon_item.price) }}</td>
          </tr>
        </template>
      </template>
      </tbody>
    </table>
  </div>
</template>

<style scoped>

</style>