<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,
  },
  hideColumns: {
    type: Array,
    default: () => [],
  },
});
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref } from 'vue';
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";

const isColumnHidden = (column) => {
  return props.hideColumns.includes(column);
};

const su_object = SessionUser.objects.department_time_bookings_types;

const hasUpdatePermission = () => {
  return (SessionUser.hasPermission('department_timebookings_types_put') || SessionUser.canAccessSuperUser());
};
</script>

<template>
  <table class="table is-fullwidth">
    <thead>
    <tr>
      <th v-if="!isColumnHidden('id')">{{su_object.columns.id.label}}</th>
      <th v-if="!isColumnHidden('product')">{{su_object.columns.product.label}}</th>
      <th v-if="!isColumnHidden('name')">{{su_object.columns.name.label}}</th>
      <th v-if="!isColumnHidden('description')">{{su_object.columns.description.label}}</th>
      <th v-if="!isColumnHidden('duration')">{{su_object.columns.duration.label}}</th>
      <th class="has-text-right"></th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="obj in objects" :key="obj.id">
      <td v-if="!isColumnHidden('id')">{{obj.id}}</td>
      <!-- Product -->
      <EditableTableColumn
          v-if="!isColumnHidden('product')"
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="product"
          :permission-check-function="hasUpdatePermission"
          :parse-function="(value) => {
            return SessionUser.objects.products.functions.getProductName(value);
          }"
      />
      <!-- Label -->
      <EditableTableColumn
          v-if="!isColumnHidden('name')"
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="name"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Description -->
      <EditableTableColumn
          v-if="!isColumnHidden('description')"
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="description"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Duration -->
      <EditableTableColumn
          v-if="!isColumnHidden('duration')"
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="duration"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Actions -->
      <td>
      <ActionSettingsWheelButton class="is-float-right">
        <template #actions>
          <RequiresPermission :permission="'department_timebookings_types_delete'">
            <template #default>
              <ActionSettingsWheelItem
                  @click="su_object.functions.showDeleteObjectForm(obj.id, loadList)"
                  :icon="SessionUser.objects.global.icons.delete"
                  :label="SessionUser.objects.global.language.delete"
                  template="danger"
              />
            </template>
            <template #fail>
              <ActionSettingsWheelItem
                  :icon="SessionUser.objects.global.icons.delete"
                  :label="SessionUser.objects.global.language.delete"
                  template="danger"
                  disabled
              />
            </template>
          </RequiresPermission>
        </template>
      </ActionSettingsWheelButton>
      </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="12">{{SessionUser.objects.global.language.showing}} {{ objects.length }} {{su_object.meta.labels.multiple}}</td>
    </tr>
    </tfoot>
  </table>
</template>

<style scoped>

</style>