<template>
  <article
    @click="read()"
    v-if="useUserStore.role !== 'client'"
    class="notification | bg-white rounded-lg | p-16 | flow"
    data-type="project-request"
  >
    <header>
      <p class="flex">
        <strong
          class="notification__type | font-medium text-primary"
          data-icon="comment"
          >Demande de création de projet</strong
        >
        <span class="notification__client | text-grey-700"
          >{{ notification.project.title }}
          {{
            notification.project.status === "draft" ? "(brouillon)" : ""
          }}</span
        >
        <time
          datetime=""
          class="notification__date | text-grey-700 | ml-auto"
          >{{ formatDate(notification) }}</time
        >
      </p>
    </header>
    <p
      v-if="notification.type"
      class="notification__body | text-md font-medium | line-clamp"
      v-html="
        'De la part de ' +
        (notification.author.name
          ? notification.author.name + ' (' + notification.author.email + ')'
          : notification.author.email) +
        ' : <br>' +
        notification.text
      "
    ></p>
  </article>
</template>

<script setup>
import { useNotificationsStore } from "../../stores/notifications";
import { useUserStore } from "../../stores/user";
import { useApiStore } from "../../stores/api";

const { notification } = defineProps({ notification: Object });
const { formatDate } = useNotificationsStore();
const { user } = useUserStore();
const api = useApiStore();

async function read() {
  const response = await api.readNotification(
    notification.id,
    notification.project.uri
  );
}
</script>
