<script setup lang="ts">
/* global $fetch */
import { useFetch, createError } from "nuxt/app";
import { ref, Ref } from "vue";
import { definePageMeta } from "~/.nuxt/imports";
import { client as clientType } from "~/utils/types/database";
import pagedTable from "~/components/pagedTable.vue";

definePageMeta({ middleware: ["auth"] });

const clientsRequest = await useFetch("/api/clients");
if (clientsRequest.error.value) throw createError(clientsRequest.error.value?.data ?? "");
const clients = clientsRequest.data as Ref<NonNullable<typeof clientsRequest.data.value>>;

const countRequest = await useFetch("/api/clients/count");
if (countRequest.error.value) throw createError(countRequest.error.value?.data ?? "");
const count = countRequest.data as Ref<NonNullable<typeof countRequest.data.value>>;

function rowClicked(client: string, edit = false) {
  console.log(client);
}

async function rowDelete(client: string) {
  try {
    await $fetch<clientType>(`/api/clients/${client}`, {
      method: "DELETE",
    });
    clients.value = clients.value.filter(e => e.id !== client);
    count.value.count--;
  } catch (e) {
    // FIXME: show the error
    console.log(e);
  }
}

const loadingMore = ref<boolean>(false);
async function loadBefore() {
  loadingMore.value = true;

  clients.value.push(...await $fetch("/api/clients", {
    query: {
      before: clients.value[clients.value.length - 1].id,
    },
  }));
  loadingMore.value = false;
}
</script>

<template>
  <VOverlay
    model-value
    origin="top center"
    :scrim="false"
    height="fit-content"
    persistent
    no-click-animation
  >
    <VAlert class="alert">
      owowowowowowowowo
    </VAlert>
  </VOverlay>
  <VRow>
    <VCol>
      <VBreadcrumbs :items="['Clients']" />
      <VSpacer />
      <div class="text-h4">
        There are {{ count?.count }} clients in the database.
      </div>
    </VCol>
  </VRow>
  <VRow>
    <VCol cols="12">
      <VCard>
        <VTable>
          <thead>
            <tr>
              <th>Name</th>
              <th>Address</th>
              <th />
            </tr>
          </thead>
          <pagedTable
            buttons
            :records="clients"
            :fields="['name', 'address']"
            record-key="id"
            @click="(id) => rowClicked(id, false)"
            @click:edit="(id) => rowClicked(id, true)"
            @click:delete="(id) => rowDelete(id)"
          />
        </VTable>
      </VCard>
      <VCol>
        <VBtn
          v-if="clients.length < count.count"
          color="primary"
          :loading="loadingMore"
          @click="loadBefore"
        >
          Load more
        </VBtn>
      </VCol>
    </VCol>
  </VRow>
</template>
