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

const searchQuery = ref("");

// Data table options
const itemsPerPage = ref(10);
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 headers = [
  {
    title: "Order",
    key: "order",
  },
  {
    title: "Date",
    key: "date",
  },
  {
    title: "Status",
    key: "status",
  },
  {
    title: "Spent",
    key: "spent",
  },
  {
    title: "Actions",
    key: "actions",
    sortable: false,
  },
];

const resolveStatus = (status) => {
  if (status === "Delivered") return { color: "success" };
  if (status === "Out for Delivery") return { color: "primary" };
  if (status === "Ready to Pickup") return { color: "info" };
  if (status === "Dispatched") return { color: "warning" };
};

const { data: ordersData, execute: fetchOrders } = await useApi(
  createUrl("/apps/ecommerce/orders", {
    query: {
      q: searchQuery,
      page,
      itemsPerPage,
      sortBy,
      orderBy,
    },
  })
);

const orders = computed(() => ordersData.value?.orders);
const totalOrder = computed(() => ordersData.value?.total ?? 0);

const deleteOrder = async (id) => {
  await $api(`/apps/ecommerce/orders/${id}`, { method: "DELETE" });
  fetchOrders();
};
</script>

<template>
  <VCard>
    <VCardText>
      <div
        class="d-flex justify-sm-space-between justify-start flex-wrap gap-4 align-center"
      >
        <h5 class="text-h5">Orders placed</h5>
        <VTextField
          v-model="searchQuery"
          density="compact"
          placeholder="Serach Order"
          style="max-inline-size: 200px; min-inline-size: 200px"
        />
      </div>
    </VCardText>
    <VDataTableServer
      v-model:items-per-page="itemsPerPage"
      v-model:page="page"
      :headers="headers"
      show-select
      :items="orders"
      :items-length="totalOrder"
      class="text-no-wrap"
      @update:options="updateOptions"
    >
      <!-- Order ID -->
      <template #item.order="{ item }">
        <RouterLink
          :to="{
            name: 'apps-ecommerce-order-details-id',
            params: { id: item.order },
          }"
        >
          #{{ item.order }}
        </RouterLink>
      </template>

      <!-- Date -->
      <template #item.date="{ item }">
        {{ new Date(item.date).toDateString() }}
      </template>

      <!-- Status -->
      <template #item.status="{ item }">
        <VChip label :color="resolveStatus(item.status)?.color">
          {{ item.status }}
        </VChip>
      </template>

      <!-- Spent -->
      <template #item.spent="{ item }"> ${{ item.spent }} </template>

      <!-- Actions -->
      <template #item.actions="{ item }">
        <IconBtn>
          <VIcon icon="tabler-dots-vertical" />
          <VMenu activator="parent">
            <VList>
              <VListItem
                value="view"
                :to="{
                  name: 'apps-ecommerce-order-details-id',
                  params: { id: item.order },
                }"
              >
                View
              </VListItem>
              <VListItem value="delete" @click="deleteOrder(item.id)">
                Delete
              </VListItem>
            </VList>
          </VMenu>
        </IconBtn>
      </template>

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

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

          <VPagination
            v-model="page"
            :length="Math.ceil(totalOrder / itemsPerPage)"
            :total-visible="
              $vuetify.display.xs
                ? 1
                : Math.min(Math.ceil(totalOrder / 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>
