<script setup lang="ts">
import {onMounted, type Ref, ref, watch} from "vue";
import {getBookRecommandations} from "@/services/bookApi";
import type {Book} from "@/services/models/book";
import BookLightCard from "@/components/book/BookLightCard.vue";
import type {BookSimilarParams} from "@/services/models/filter";

const model = ref(null);
const books: Ref<Book[]> = ref([]);

const {book} = defineProps<{ book: Book }>()
onMounted(getSimilarBooks);

async function getSimilarBooks() {
  const params : BookSimilarParams= {
    author: undefined,
    fast: undefined,
    collection: undefined
  };
  if(selectedOption.value === 0){
    params.fast = true;
  }
  else if(selectedOption.value === 1){
    params.author = true;
  } else if(selectedOption.value === 2){
    params.collection = true;
  }

  return getBookRecommandations(book.id, params)
    .then(result => {
      books.value = result;
    })
    .catch(err => {
      console.log(err);
    })
}

const suggestionOptions = [
  {label: 'Vous aimeriez aussi', key:0},
  {label: 'Du même auteur', key:1},
  {label: 'Dans la même collection', key:2}
]

const selectedOption = ref(0)

watch(selectedOption, getSimilarBooks)
</script>

<template>
  <v-sheet>
    <span class="d-flex ga-1 bg-white pa-2">
      <v-select
        v-model="selectedOption"
        class="font-weight-medium font-italic"
        hide-details
        item-title="label"
        item-value="key"
        :items="suggestionOptions"
      >
        <template #prepend-inner>
          <v-icon
            icon="mdi-heart"
            color="pink"
          />
        </template>
      </v-select>
    </span>
    <v-slide-group
      v-model="model"
      class="pa-0"
      center-active
      show-arrows
    >
      <v-slide-group-item
        v-for="book in books"
        :key="book.id"
        v-slot="{ toggle }"
      >
        <v-card
          color="primary"
          class="ma-2"
          height="118"
          width="118"
          @click="toggle"
        >
          <div class="d-flex fill-height align-center justify-center">
            <BookLightCard :book />
          </div>
        </v-card>
      </v-slide-group-item>
    </v-slide-group>
  </v-sheet>
</template>

<style>
.v-slide-group__prev, .v-slide-group__next {
  flex-basis: 24px;
  min-width: 24px;
}
</style>
