<template>
  <aside id="comments-container" aria-labelledby="comments-label">
    <h2 id="comments-label" class="sr-only">Commentaires</h2>
    <div class="comments | flow">
      <div v-for="(page, pageIndex) in comments" class="comments__page-group">
        <article
          v-for="(comment, commentIndex) in Object.values(page)"
          :key="pageIndex + commentIndex"
          class="comment | flow"
          :data-status="setStatus(comment)"
        >
          <header>
            <p>
              <strong>{{ comment.username }}</strong>
              <span class="comment__id">#{{ commentIndex + 1 }}</span> •
              <span class="comment__page">Page {{ pageIndex }}</span>
              <time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
                formatDate(comment.date)
              }}</time>
            </p>
          </header>
          <p class="comment__body">
            {{ comment.text }}
          </p>
        </article>
      </div>
    </div>
    <button
      id="add-comment"
      class="btn btn--white-20 | w-full"
      @click="isAddOpen = true"
    >
      Ajouter un commentaire
    </button>

    <form
      v-if="isAddOpen"
      action=""
      method="post"
      class="flow"
      @submit="addComment"
    >
      <label class="sr-only" for="comment">Votre commentaire</label>
      <textarea
        name="comment"
        id="comment"
        placeholder="Ajouter un commentaire"
        rows="3"
        class="text-sm | rounded-lg bg-black p-12"
        v-model="newCommentText"
      ></textarea>
      <footer class="flex">
        <button class="btn btn--white-20" @click="closeAddField()">
          Annuler
        </button>
        <input type="submit" class="btn btn--tranparent" />
      </footer>
    </form>
  </aside>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import uniqid from "uniqid";
import { ref } from "vue";
import { useUserStore } from "../../stores/user";
import { usePageStore } from "../../stores/page";

dayjs.locale("fr");

const { currentPageIndex, file, comments } = defineProps({
  currentPageIndex: Number,
  file: Object,
  comments: Object,
});
const { user } = useUserStore();
const { page } = usePageStore();

const newCommentText = ref("");
const isAddOpen = ref(false);
const emits = defineEmits(["update:file"]);

// Functions
function addComment(event) {
  event.preventDefault();
  const date = dayjs().format();
  const comment = {
    pageUri: page.uri + "/client-brief",
    targetPage: currentPageIndex,
    fileName: file.name,
    userUuid: user.uuid,
    text: newCommentText.value,
    date,
    id: uniqid(),
  };

  const headers = {
    method: "POST",
    body: JSON.stringify(comment),
  };

  fetch("/add-comment.json", headers)
    .then((res) => res.json())
    .then((newFile) => {
      newCommentText.value = "";
      isAddOpen.value = false;
      emits("update:file", newFile);
    })
    .catch((error) => {
      console.error("Erreur lors de la sauvegarde :", error);
    });
}

function formatDate(date) {
  const todayNumber = parseInt(dayjs().format("YYMMD"));
  const dateNumber = parseInt(dayjs(date).format("YYMMD"));

  if (dateNumber === todayNumber) {
    return "Aujourd'hui";
  }

  if (dateNumber === todayNumber - 1) {
    return "hier";
  }

  return dayjs(date).format("D MMM YY");
}

function closeAddField() {
  isAddOpen.value = false;
  newCommentText.value = "";
}

function setStatus(comment) {
  try {
    if (user?.notifications?.comments.hasOwnProperty(comment.id)) {
      return "unread";
    } else {
      return undefined;
    }
  } catch (error) {
    return undefined;
  }
}
</script>
