<script setup lang="ts">
import { useRoute, useFetch, createError } from "nuxt/app";
import { Ref } from "vue";

import PagedList from "~/components/pagedList.vue";
import { client as clientType } from "~/utils/types/database";

const route = useRoute();
const id = route.params.id;

const clientRequest = await useFetch(`/api/clients/${id}`);
if (clientRequest.error.value) throw createError(clientRequest.error.value?.data ?? "");
const client = clientRequest.data as Ref<clientType>;
console.log(client);

</script>

<template>
  <VRow>
    <VCol cols="12">
      <div
        class="text-h4"
        :class="client.name === null ? ['font-italic'] : []"
      >
        {{ client.name ?? "[none]" }}
      </div>
    </VCol>
  </VRow>
  <VRow>
    <VCol md="4" cols="12">
      <VCard>
        <VList>
          <VListItem
            v-if="client.address"
            prepend-icon="mdi-map-marker"
          >
            <VListItemTitle class="text-wrap">
              {{ client.address }}
            </VListItemTitle>
          </VListItem>
          <VListItem
            v-if="client.email"
            prepend-icon="mdi-email"
          >
            <VListItemTitle class="text-wrap">
              {{ client.email }}
            </VListItemTitle>
          </VListItem>
          <VListItem
            v-if="client.phone"
            prepend-icon="mdi-phone"
          >
            <VListItemTitle class="text-wrap">
              {{ client.phone }}
            </VListItemTitle>
          </VListItem>
        </VList>
      </VCard>
    </VCol>
    <VCol cols="12" md="8">
      <PagedList
        :records="[{a: 'owo'}, {a: 'uwu'}, {a: 'qwq'}]"
        record-key="a"
      >
        <template #text="i">
          {{ i }}
        </template>
        <template #title="i">
          {{ i }}
        </template>
      </PagedList>
    </VCol>
  </VRow>
</template>
