<template>
  <aside id="comments-container" aria-labelledby="comments-label">
    <h2 id="comments-label" class="sr-only">Commentaires</h2>
    <div class="comments | flow">
      <article class="comment | flow" data-status="unread">
        <header>
          <p>
            <strong>François</strong>
            <span class="comment__id">#1</span> •
            <span class="comment__page">Page 12</span>
            <time datetime="2024-10-22">Hier</time>
          </p>
        </header>
        <p class="comment__body">
          Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
          consequat porta mauris hendrerit malesuada viverra turpis.
        </p>
      </article>
    </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">Annuler</button>
        <input type="submit" class="btn btn--tranparent" />
      </footer>
    </form>
  </aside>
</template>

<script setup>
import { ref } from "vue";
import { useUserStore } from "../../stores/user";
import dayjs from "dayjs";

const { currentPage } = defineProps({
  currentPage: Number,
});
const { user } = useUserStore();

const newCommentText = ref("");

const isAddOpen = ref(false);

// Functions
function addComment(event) {
  event.preventDefault();
  const comment = {
    userUuid: user.uuid,
    text: newCommentText.value,
    page: currentPage,
    date: dayjs().format(),
  };
  console.log(comment);
}
</script>
