<script setup lang="ts">
const { $trpc } = useNuxtApp();
const route = useRoute();

const { data: contact } = await $trpc.contactGet.useQuery({ contactId: `${route.params.contactId}` });
if (contact.value === null) throw createError({ statusCode: 404, statusMessage: 'Not Found' });

function deleteSubmit(event: Event) {
  const response = window.confirm(
    'Please confirm you want to delete this record.'
  );
  if (!response) {
    event.preventDefault();
  }
}
</script>

<template>
  <div id="contact">
    <div>
      <img
        :key="contact.avatar"
        :alt="() => `${contact.first} ${contact.last} avatar`"
        :src="contact.avatar"
      >
    </div>

    <div>
      <h1>
        <template v-if="contact.first || contact.last">
          {{ `${contact.first} ${contact.last}` }}
        </template>
        <i v-else>No Name</i>
        <ContactFavorite :contact="contact"/>
      </h1>
      <p v-if="contact.twitter">
        <a :href="`https://twitter.com/${contact.twitter}`">{{ contact.twitter }}</a>
      </p>
      <p v-if="contact.notes">{{ contact.notes }}</p>
      <div>
        <form action="edit">
          <button type="submit">Edit</button>
        </form>

        <form
          action="destroy"
          method="post"
          @submit="deleteSubmit">
          <button type="submit">Delete</button>
        </Form>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>