<script setup>
import { paginationMeta } from "@api-utils/paginationMeta";
import { VDataTableServer } from "vuetify/lib/labs/VDataTable";

// Data table options
const itemsPerPage = ref(5);
const page = ref(1);
const sortBy = ref();
const orderBy = ref();

const updateOptions = (options) => {
  page.value = options.page;
  sortBy.value = options.sortBy[0]?.key;
  orderBy.value = options.sortBy[0]?.order;
};

const { data: vehiclesData } = await useApi(
  createUrl("/apps/logistics/vehicles", {
    query: {
      page,
      itemsPerPage,
      sortBy,
      orderBy,
    },
  })
);

const vehicles = computed(() => vehiclesData.value.vehicles);
const totalVehicles = computed(() => vehiclesData.value.totalVehicles);

const headers = [
  {
    title: "LOCATION",
    key: "location",
  },
  {
    title: "STARTING ROUTE",
    key: "startRoute",
  },
  {
    title: "ENDING ROUTE",
    key: "endRoute",
  },
  {
    title: "WARNINGS",
    key: "warnings",
  },
  {
    title: "PROGRESS",
    key: "progress",
  },
];

const resolveChipColor = (warning) => {
  if (warning === "No Warnings") return "success";
  if (warning === "fuel problems") return "primary";
  if (warning === "Temperature Not Optimal") return "warning";
  if (warning === "Ecu Not Responding") return "error";
  if (warning === "Oil Leakage") return "info";
};
</script>

<template>
  <VCard>
    <VCardItem title="On Route vehicles">
      <template #append>
        <MoreBtn />
      </template>
    </VCardItem>

    <VDivider />
    <VDataTableServer
      v-model:items-per-page="itemsPerPage"
      v-model:page="page"
      :items-per-page-options="[
        { value: 5, title: '5' },
        { value: 10, title: '10' },
        { value: 20, title: '20' },
        { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' },
      ]"
      :items-length="totalVehicles"
      :items="vehicles"
      :headers="headers"
      show-select
      class="text-no-wrap"
      @update:options="updateOptions"
    >
      <template #item.location="{ item }">
        <VAvatar variant="tonal" class="me-2" size="40">
          <VIcon icon="tabler-truck" size="24" />
        </VAvatar>
        <RouterLink
          class="text-body-2 text-high-emphasis font-weight-medium"
          :to="{ name: 'apps-logistics-fleet' }"
        >
          VOL-{{ item.location }}
        </RouterLink>
      </template>

      <template #item.startRoute="{ item }">
        {{ item.startCity }}, {{ item.startCountry }}
      </template>

      <template #item.endRoute="{ item }">
        {{ item.endCity }}, {{ item.endCountry }}
      </template>

      <template #item.warnings="{ item }">
        <VChip :color="resolveChipColor(item.warnings)" label>
          {{ item.warnings }}
        </VChip>
      </template>

      <template #item.progress="{ item }">
        <div class="d-flex align-center gap-x-4" style="min-inline-size: 240px">
          <div class="w-100">
            <VProgressLinear
              :model-value="item.progress"
              rounded
              color="primary"
              :height="8"
            />
          </div>
          <div>{{ item.progress }}%</div>
        </div>
      </template>

      <!-- pagination -->
      <template #bottom>
        <VDivider />

        <div
          class="d-flex align-center justify-sm-space-between justify-center flex-wrap gap-3 pa-5 pt-3"
        >
          <p class="text-sm text-disabled mb-0">
            {{ paginationMeta({ page, itemsPerPage }, totalVehicles) }}
          </p>

          <VPagination
            v-model="page"
            :length="Math.ceil(totalVehicles / itemsPerPage)"
            :total-visible="
              $vuetify.display.xs
                ? 1
                : Math.min(Math.ceil(totalVehicles / itemsPerPage), 5)
            "
          >
            <template #prev="slotProps">
              <VBtn
                variant="tonal"
                color="default"
                v-bind="slotProps"
                :icon="false"
              >
                Previous
              </VBtn>
            </template>

            <template #next="slotProps">
              <VBtn
                variant="tonal"
                color="default"
                v-bind="slotProps"
                :icon="false"
              >
                Next
              </VBtn>
            </template>
          </VPagination>
        </div>
      </template>
    </VDataTableServer>
  </VCard>
</template>
