<script setup>
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
import {getCustomerName} from "@/components/shop/POSDepartmentProcess.vue";
import { ref, defineProps, defineEmits } from 'vue';
const props = defineProps({
  objects: {
    type: Array,
    default: () => [],
  },
  showEmpty: {
    type: Boolean,
    default: false,
  },
  showTotal: {
    type: Boolean,
    default: true,
  },
  isSelector: {
    type: Boolean,
    default: false,
  },
  onSelected: {
    type: Function,
    default: () => {},
  },
});

const emit = defineEmits(['update:selected']);
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) => {
  // Open the url in a new tab
  window.open(path, '_blank');
}

const parseTransactionCount = (value) => {
  if (typeof value === 'number') {
    return value === 0 ? SessionUser.objects.global.language.no_data : value;
  } else if (typeof value === 'string') {
    return parseInt(value);
  } else if (typeof value === 'object') {
    return value.length;
  } else if (value === null) {
    // Handle other types if necessary
    return SessionUser.objects.global.language.no_data;
  }
}

const onSelect = (id) => {
  emit('update:selected', id);
  props.onSelected(id);
}

</script>

<template>
    <table class="table is-fullwidth is-hoverable is-striped">
      <thead>
      <tr>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.id.label }}</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.columns.processor.label }}</th>
        <th class="is-narrow">{{ SessionUser.objects.orders.meta.title }}</th>
        <th>{{ SessionUser.objects.global.language.status }}</th>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.created_at.label }}</th>
        <th v-if="props.showTotal">{{ SessionUser.objects.global.language.total}}</th>
        <th><!-- Actions / Selector --></th>
      </tr>
      </thead>
      <tbody>
      <template v-for="object in props.objects" :key="object.id">
        <tr v-if="object.orders > 0 || props.showEmpty">
        <td>{{ object.id }}</td>
        <!-- Customer name -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="customer_name"
            :virtual-column="true"
            :parse-function="(value) => value.customer_name"
        />
        <!-- Customer number -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="customer_number"
        />
        <!-- Processor -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="processor"
            :parse-function="(value) => value === null ? SessionUser.objects.global.language.no_data : value === 1 ? 'E-conomic' : SessionUser.objects.global.language.other"
        />
        <!-- Transactions -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="orders"
            :parse-function="(value) => parseTransactionCount(value)"
        />
        <!-- Closed at -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="closed_at"
            :parse-function="(value) => value === null ? 'Åben' : 'Lukket ' + value"
        />
        <!-- Created at -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="created_at"
        />
        <!-- Total net amount -->
        <td v-if="props.showTotal">{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
        <!-- Actions -->
        <td v-if="!props.isSelector">
          <ActionSettingsWheelButton>
            <template #actions>
              <ActionSettingsWheelItem
                icon="fas fa-eye"
                @click="redirect('/superuser/invoices/' + object.id)"
                label="Vis"
              />
            </template>
          </ActionSettingsWheelButton>
        </td>
        <!-- Selector -->
        <td v-if="props.isSelector">
          <button class="button is-small is-dark" @click="onSelect(object.id)">
            {{ SessionUser.objects.global.language.select }}
          </button>
        </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 - objects.filter(object => object.orders === 0).length }} af {{objects.length}} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}<template v-if="!props.showEmpty">, skjuler {{ objects.filter(object => object.orders === 0).length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }} uden ordre</template></td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>