<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,
  },
  xlVaskCustomerObject: {
    type: Object,
    required: true,
  },
  userId: {
    type: Number,
    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";
import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";

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

const su_object_orders = SessionUser.objects.orders;
const su_object_vehicles = SessionUser.objects.vehicles;
const su_object_global_language = SessionUser.objects.global.language;

const hasUpdatePermission = () => {
  return (SessionUser.hasPermission('add_vehicle_other') || SessionUser.canAccessSuperUser());
};


const xlVaskVehicle = {
  vehicleId: null,
  registrationNumber: null,
  customerId: null,
  vehicleTypeId: null,
  active: null,
  autoStartOnLpr: null,
  updated: null,
  createDate: null,
  externId: null,
  smartCard: [],
  multilineVehicleServices: [],
}

const onClickShowVehicleUsageLog = (obj) => {
  console.log('Clicked on vehicle usage log');
}

const onClickImportVehicle = (vehicle) => {
  console.log('Clicked on import vehicle', vehicle, props.xlVaskCustomerObject.externId)
  let customer_number = props.xlVaskCustomerObject.externId;
  let registration_number = vehicle.registrationNumber;
  // Add the vehicle to the customer
  console.log('Adding vehicle to customer', customer_number, registration_number);
  SessionUser.objects.vehicles.add(
      0,
      registration_number,
      false, // Since XLVask API haven't yet implemented the wash types, we don't know which one to use
      customer_number,
  )
}

const onClickImportAllVehicles = () => {
  console.log('Clicked on import all vehicles');
  // Get the vehicles from XLVask
  SessionUser.superUser.modules.xlvask.functions.getVehicles(
      props.xlVaskCustomerObject.customerId,
  ).then((response) => {
        let matchingVehicles = response.data.data;
        if (matchingVehicles.length !== 0) {
          matchingVehicles.forEach((vehicle) => {
            // Add the vehicle to the customer
            console.log('Adding vehicle to customer', vehicle, props.xlVaskCustomerObject.externId);
            SessionUser.objects.vehicles.add(
                0,
                vehicle.registrationNumber,
                false, // Since XLVask API haven't yet implemented the wash types, we don't know which one to use
                props.xlVaskCustomerObject.externId,
            )
          });
        }
      }
  ).catch((error => {}));
}
</script>

<template>
  <table class="table is-fullwidth">
    <thead>
    <tr>
      <th v-if="!isColumnHidden('vehicleId')">{{su_object_vehicles.columns.id.label}}</th>
      <th v-if="!isColumnHidden('registrationNumber')">{{su_object_vehicles.columns.reg.label}}</th>
      <th v-if="!isColumnHidden('customerId')">{{su_object_vehicles.columns.customer_id.label}}</th>
      <th v-if="!isColumnHidden('vehicleTypeId')">{{su_object_vehicles.columns.type.label}}</th>
      <th v-if="!isColumnHidden('active')">{{su_object_global_language.active}}</th>
      <th v-if="!isColumnHidden('autoStartOnLpr')">{{su_object_global_language.auto_start_on_lpr}}</th>
      <th class="has-text-right"></th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="obj in objects" :key="obj.id">
      <!-- Vehicle ID -->
      <EditableTableColumn
          v-if="!isColumnHidden('vehicleId')"
          :object="obj"
          :loadList="loadList"
          column="vehicleId"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Registration Number -->
      <EditableTableColumn
          v-if="!isColumnHidden('registrationNumber')"
          :object="obj"
          :loadList="loadList"
          column="registrationNumber"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Customer ID -->
      <EditableTableColumn
          v-if="!isColumnHidden('customerId')"
          :object="obj"
          :loadList="loadList"
          column="customerId"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Vehicle Type ID -->
      <EditableTableColumn
          v-if="!isColumnHidden('vehicleTypeId')"
          :object="obj"
          :loadList="loadList"
          column="vehicleTypeId"
          :permission-check-function="hasUpdatePermission"
          :parse-function="(value) => {
            return SessionUser.objects.xlvask_vehicle_types.functions.getVehicleTypeName(value, value);
          }"
      />
      <!-- Active -->
      <EditableTableColumn
          v-if="!isColumnHidden('active')"
          :object="obj"
          :loadList="loadList"
          column="active"
          :permission-check-function="hasUpdatePermission"
          :parse-function="(value) => {
            return value ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no;
          }"
      />
      <!-- Auto Start on LPR -->
      <EditableTableColumn
          v-if="!isColumnHidden('autoStartOnLpr')"
          :object="obj"
          :loadList="loadList"
          column="autoStartOnLpr"
          :permission-check-function="hasUpdatePermission"
          :parse-function="(value) => {
            return value ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no;
          }"
      />
      <!-- Actions -->
      <td class="is-float-right">
        <ActionSettingsWheelButton
        v-bind:reg_1="obj.registrationNumber"
        v-bind:user_id="props.userId"
        >
          <template #actions>
            <ActionSettingsWheelItemLabel
              :label="SessionUser.superUser.modules.xlvask.meta.title"
              />
            <RequiresPermission
              permission="add_vehicle_other"
              >
            <ActionSettingsWheelItem
                :label="SessionUser.objects.global.language.import + ' ' + SessionUser.objects.vehicles.meta.labels.single.toLowerCase()"
                :click-action="() => onClickImportVehicle(obj)"
                :icon="SessionUser.objects.global.icons.import"
                />
            </RequiresPermission>
            <RequiresPermission
              permission="add_vehicle_other"
              >
            <ActionSettingsWheelItem
                :label="SessionUser.objects.global.language.import_all + ' ' + SessionUser.objects.vehicles.meta.labels.multiple.toLowerCase()"
                :click-action="onClickImportAllVehicles"
                :icon="SessionUser.objects.global.icons.import"
                />
            </RequiresPermission>
          </template>
        </ActionSettingsWheelButton>
      </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="12">{{SessionUser.objects.global.language.showing}} {{ objects.length }} {{su_object_vehicles.meta.labels.multiple}}</td>
    </tr>
    </tfoot>
  </table>
</template>

<style scoped>

</style>