<script setup>
import { ref } from 'vue'
import BookCard from './BookCard.vue';
import { getMyBooks } from './api.js'



const FilterStates = Object.freeze({
    READ: "read",
    WANTREAD: "wantread",
});

let currentFilterState = ref(FilterStates.READ);

let { data, error } = getMyBooks(currentFilterState.value);


function fetchData() {
  let res = getMyBooks(currentFilterState.value);
  data = res.data;
  error = res.error;
}

function onFilterButtonClick(newstate) {
  currentFilterState.value = newstate;
  fetchData();
}

function computeDynamicClass(state) {
  return currentFilterState.value === state ? 'is-active is-primary' : '';
}

</script>

<template>
  <div class="mb-5">
    <button class="button is-medium"
            @click="onFilterButtonClick(FilterStates.READ)"
            :class="computeDynamicClass(FilterStates.READ)">
      {{$t('bookbrowser.read')}}
    </button>
    <button class="button is-medium"
            @click="onFilterButtonClick(FilterStates.WANTREAD)"
            :class="computeDynamicClass(FilterStates.WANTREAD)">
      {{$t('bookbrowser.wantread')}}
    </button>
  </div>
  <div class="books">
    <div v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
    <div class="book" v-else-if="data" v-for="book in data" :key="book.id">
      <BookCard v-bind="book" />
    </div>
    <div v-else>{{$t('bookbrowser.loading')}}</div>
  </div>
</template>

<style scoped>

.books {
	position:relative;
	float:left;
	width:100%; height:auto;
	padding-bottom: 100px;
  line-height: 2.5;

  column-count: 2;
  column-gap: 15px;
}

#book {
  width: 100% !important;
  height: auto !important;
  transition: ease-in-out 0.15s;
}
</style>
