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

const props = defineProps({
  objects: {
    type: Object,
    required: true
  },
  loadList: {
    type: Function,
    required: true
  }
});
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";
import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
import UserOtherSpecialArrangement
  from "@/views/dashboards/superUserDashboard/user/displays/other/UserOtherSpecialArrangement.vue";
import InvoiceOrderTable from "@/components/displays/superuser/tables/InvoiceOrderTable.vue";

const activeDropdowns = ref([]);

const redirect = (path) => {
  // Open the url in a new tab
  window.open(path, '_blank');
}

const isDropdownActive = (object) => {
  return activeDropdowns.value.includes(object.customer_number);
}

const toggleDropdown = (object) => {
  if (isDropdownActive(object)) {
    activeDropdowns.value.splice(activeDropdowns.value.indexOf(object.customer_number), 1);
  } else {
    activeDropdowns.value.push(object.customer_number);
  }
}

const getOrders = (object) => {
  let invoices = object.open_invoices;
  let orders = [];
  for (let i = 0; i < invoices.length; i++) {
    let invoice = invoices[i];
    let invoice_orders = invoice.orders;
    orders = orders.concat(invoice_orders);
  }
  return orders;
}

getDepartments();
</script>

<template>
  {{ activeDropdowns }}
    <table class="table is-fullwidth is-hoverable is-striped">
      <thead>
      <tr>
        <th class="is-narrow"><!-- Dropdown --></th>
        <th>{{ SessionUser.objects.global.language.customer_name }}</th>
        <th class="is-narrow">{{ SessionUser.objects.collectedOrderInvoices.columns.customer_number.label }}</th>
        <th class="is-narrow">{{ SessionUser.objects.collectedOrderInvoices.meta.title }}</th>
        <th class="is-narrow">{{ SessionUser.objects.orders.meta.title }}</th>
        <th>{{ SessionUser.objects.global.language.total}}</th>
        <th><!-- Actions --></th>
      </tr>
      </thead>
      <tbody>
      <template v-for="object in objects" :key="object.id">
        <tr>
        <td>
          <button
              class="button is-small"
              @click="toggleDropdown(object)"
          >
            <span
                class="icon"
                :class="isDropdownActive(object) ? 'has-text-link' : ''"
                :style="isDropdownActive(object) ? 'transform: rotate(90deg);' : ''"
            >
              <!-- Dropdown icon -->
              <i class="fas fa-angle-right"></i>
            </span>
          </button>
        </td>
        <!-- Customer name -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="customer_name"
            :virtual-column="true"
            :parse-function="(value) => value.customer_name"
            :style="isDropdownActive(object) ? 'font-weight: bold;' : ''"
        />
        <!-- Customer number -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="customer_number"
        />
        <!-- Active invoice count -->
        <td>{{ object.active_invoices.length }}</td>
        <!-- Active invoice count -->
        <td>{{ object.orders }}</td>
        <!-- Status -->
        <!-- Total net amount -->
        <td>{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
        <!-- Actions -->
        <td>
          <ActionSettingsWheelButton>
            <template #actions>
              <ActionSettingsWheelItem
                icon="fas fa-eye"
                @click="redirect('/superuser/invoices/' + object.id)"
                label="Vis"
              />
            </template>
          </ActionSettingsWheelButton>
        </td>
      </tr>
      <!-- Dropdown content -->
        <tr v-if="isDropdownActive(object)">
          <td colspan="8">
            <InvoiceOrderTable
                v-bind:orders="getOrders(object)"
                v-bind:options="{ }"
                v-bind:user_id="object.user_id"
                v-bind:columns="{
                  id: {
                    label: 'Transaktion ID',
                    visible: true
                  },
                  customer_id: { visible: false },
                  cashier_id: { visible: false },
                  department_id: {
                    label: 'Afdeling',
                    visible: true,
                    getRowValueFormatted: (order, row) => {
                      return getDepartmentName(order[row.key]);
                    }
                  },
                  reg_1: { visible: true },
                  reg_2: { visible: true },
                  reg_3: { visible: true },
                  reference: { visible: true },
                  notes: { visible: true },
                  created_at: { visible: true },
                  total_net_amount: {
                    label: 'Total',
                    type: 'number',
                    sortable: true,
                    creation: {
                      required: false
                    },
                    visible: true,
                    getRowValueFormatted: (order, row) => {
                      return SessionUser.functions.currency.toLocal(parseInt(order[row.key]));
                    },
                  },
                  completed_at: {
                    label: SessionUser.objects.global.language.status,
                    visible: true,
                    getRowValueFormatted: (order, row) => {
                      return order[row.key] ? SessionUser.objects.global.language.completed : SessionUser.objects.global.language.not_completed;
                    },
                    getRowValueColor: (order) => {
                      return order.completed_at ? 'has-text-success' : 'has-text-danger';
                    },
                  },
                  show_content: {
                    label: 'Vis',
                    visible: true,
                    getRowValueFormatted: (order, row) => {
                      // Check if the order is already shown (or hidden)
                      if (order.show_content !== undefined && order.show_content) {
                        // Hide the order
                        return SessionUser.objects.global.language.hide_content;
                      } else {
                        // Show the order
                        return SessionUser.objects.global.language.show_content;
                      }
                    },
                    buttonOnClick: (order, row) => {
                      // Check if the order is already shown (or hidden)
                      if (order.show_content !== undefined && order.show_content) {
                        // Hide the order
                        order.show_content = false;
                      } else {
                        // Show the order
                        order.show_content = true;
                      }
                    },
                    isButton: true
                  }
                }
                "
            />
          </td>
        </tr>
      </template>
      <!-- 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 }} af {{ objects.length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}</td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>