<script setup lang="ts">
import type { Book } from "@/models/book";
import { BookService } from "@/services/book.service";
import { onMounted, ref } from "vue";
import BookCard from "@/components/BookCard.vue";
import CreateBookForm from "@/components/CreateBookForm.vue";
import { useAuth } from "@/composables/useAuth";
import { useToast } from "vue-toast-notification";

const books = ref<Book[]>([]);
const bookService = new BookService();
const isCreatingBookFormOpened = ref<boolean>(false);
const { isAuthenticated } = useAuth();
const toastService = useToast();

function sortBooks(a: Book, b: Book) {
  if (a.updated_at > b.updated_at) {
    return -1;
  } else if (a.updated_at < b.updated_at) {
    return 1;
  }
  return 0;
}

function pushNewBook(book: Book) {
  book.added_at = new Date(book.added_at);
  book.updated_at = new Date(book.updated_at);
  books.value.push(book);
  books.value.sort(sortBooks);
  toastService.success(`Livre créé avec succès"`, {
    position: "bottom-right",
    pauseOnHover: true,
    dismissible: true,
  });
}

function closeBookFormModal() {
  isCreatingBookFormOpened.value = false;
}

onMounted(async () => {
  books.value = await bookService.findBooks();

  books.value.map((book) => {
    book.added_at = new Date(book.added_at);
    book.updated_at = new Date(book.updated_at);
  });

  books.value.sort(sortBooks);
});
</script>

<template>
  <CreateBookForm
    v-if="isAuthenticated"
    :is-active="isCreatingBookFormOpened"
    @new-book="(book) => pushNewBook(book)"
    @close-book-form-modal="closeBookFormModal"
  />
  <main class="cards">
    <BookCard v-for="book in books" :book="book" :key="book.id" class="card" />
  </main>
  <div v-if="isAuthenticated" class="add-button-container">
    <button @click="isCreatingBookFormOpened = true" class="add-button">
      <h3><font-awesome-icon icon="fa-plus" /> Ajouter un livre</h3>
    </button>
  </div>
</template>

<style scoped>
.add-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: 2em;
  margin-bottom: 2em;
}

.add-button {
  padding-right: 1em;
  padding-left: 1em;
  background-color: #1e90ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.add-button:hover {
  transition: 0.3s;
  background-color: #176cc0;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}

.action {
  display: inline-flex;
  margin-top: 1rem;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  align-items: center;
  gap: 0.25rem;
  background-color: #2563eb;
  padding: 4px 8px;
  border-radius: 4px;
}

.action span {
  transition: 0.3s ease;
}

.action:hover span {
  transform: translateX(4px);
}

@media (max-width: 820px) {
  .add-button-container {
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
