<script setup>
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
import { loadList } from "@/components/pagination/paginatedList.vue";

const props = defineProps({
  objects: {
    type: Array,
    required: true
  }
});
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import ColorIndicator from "@/components/displays/buttons/ColorIndicator.vue";

const su_object = SessionUser.objects.collectedOrderInvoices;

const isInvoiceCancelled = (object) => {
  // Check if the invoice has been canceled (There's no orders attached to it)
  if (object.orders.length === 0) {
    return true
  }
};

const canUserEditObject = (object) => {
  // Check if the invoice has been booked in Economic, if so, we don't want the user to be able to edit it. (It has already been sent to the customer)
  if (object.economic_invoice_booked_id || object.economic_invoice_booked_id === 0) {
    return false
  }
  // Since the object is not marked as closed, we don't want the user making changes that might need to be redone.
  // if (!object.closed_at) {
  //  return false
  // }
  // Check if the invoice has been canceled (There's no orders attached to it)
  if (isInvoiceCancelled(object)) {
    return false
  }
  // All checks passed, we want the user to be able to edit the object.
  return true
};

const getObjectColor = (object, is_text) => {
  let color = 'grey';
  if (object.closed_at) {
    color = 'warning';
  }
  if (object.economic_invoice_booked_id || object.economic_invoice_booked_id === 0) {
    color = 'success';
  }
  if (isInvoiceCancelled(object)) {
    color = 'danger';
  }
  return is_text ? ('has-text-' + color) : ('is-' + color);
};

const getObjectStatus = (object) => {
  let status = 'Ikke behandlet';
  if (object.closed_at) {
    status = 'Ikke faktureret';
  }
  if (object.economic_invoice_booked_id || object.economic_invoice_booked_id === 0) {
    status = 'Faktureret';
  }
  if (isInvoiceCancelled(object)) {
    return 'Annulleret';
  }
  return status;
};

const dropdown_content_requirements = (object) => {
  let requirements = [];
  // Check if the user requires a PO number

};

const dropdown_content = (object) => {
  return {
    title: SessionUser.functions.ucFirst(SessionUser.objects.collectedOrderInvoices.meta.labels.single) + ' ' + object.id,
    buttons_title: null,
    content: [
        // Invoice status
      {
        text: 'Status',
        action: () => {},
        classes: [...[(getObjectColor(object, false))]],
        button: true,
        button_text: getObjectStatus(object),
        button_classes: [...[(getObjectColor(object, true))], ...['is-text']],
        v_centered: true,
      },
        // Orders attached to the invoice
      {
        text: SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.multiple),
        action: () => {},
        classes: ['has-text-grey'],
        button: true,
        button_classes: ['has-text-grey', 'is-text'],
        v_centered: true,
        button_text: object.orders.length > 0 ? object.orders.length : SessionUser.objects.global.language.no_data,
      },
    ],
    buttons: []
  }
};
</script>

<template>
  <div>
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th class="is-narrow"><!--Color indicator--></th>
        <th>{{su_object.columns.id.label}}</th>
        <th>{{su_object.columns.created_at.label}}</th>
        <th>{{su_object.columns.po_number.label}}</th>
        <th>{{SessionUser.objects.global.language.total}}</th>
      </tr>
      </thead>
      <tbody>
      <template v-for="object in props.objects" :key="object.id">
        <tr>
          <td><ColorIndicator
              :color_class="getObjectColor(object, true)"
              :dropdown_content="dropdown_content(object)"
          /></td>
          <td>{{ object.id }}</td>
          <td>{{ object.created_at }}</td>
          <!-- PO Number -->
          <EditableTableColumn
              :object="object"
              :loadList="loadList"
              column="po_number"
              :parse-function="(value) => object.po_number"
              :edit-function="SessionUser.objects.collectedOrderInvoices.showEditObjectFieldForm"
              :permission-check-function="() => canUserEditObject(object)"
          />
          <td>{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
        </tr>
      </template>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="10">Viser {{ props.objects.length }} transaktioner</td>
      </tr>
      </tfoot>
    </table>
    <!-- If there are no objects, show a message -->
    <div class="notification is-dark mt-6 mb-6" v-if="props.objects.length === 0">
      Der er ingen transaktioner at vise
    </div>
  </div>
</template>

<style scoped>

</style>