<script setup>
defineProps(['metaItemsPerPage', 'loadFunction', 'isLoading', 'setMetaItemsPerPage'])
import { ref } from 'vue'
import ShowErrorField from "@/components/global/ShowErrorField.vue";

const perPageOptions = ref([5, 10, 15, 20, 25, 50, 100])

const selectedPerPage = ref(100) // Default number of items per page

// If the screen is mobile, set the is small variable to true
const isSmall = ref(window.innerWidth < 1024);

// When the window is resized, check if the screen is mobile
window.addEventListener('resize', () => {
  isSmall.value = window.innerWidth < 1024;
});

</script>

<template>
  <div class="py-2">
    <div class="columns is-vcentered is-multiline is-mobile">
      <!-- Change the number of items per page -->
      <div class="column is-narrow my-3" :class="{ 'is-hidden': isSmall }">
        <label class="label">Antal per side</label>
        <div class="control">
          <div class="select">
            <select v-model="selectedPerPage" @change="setMetaItemsPerPage(selectedPerPage); selectedPerPage.valueOf = selectedPerPage">
              <!-- If the selected number of items per page is not in the list, add it to the list -->
              <option v-if="!perPageOptions.includes(selectedPerPage)" :value="selectedPerPage" :class="{ 'is-skeleton': isLoading }" selected>{{ selectedPerPage }}</option>
              <!-- Show the options, with the selected option marked as selected -->
              <option v-for="option in perPageOptions" :value="option" :class="{ 'is-skeleton': isLoading }" :selected="option === metaItemsPerPage.value">{{ option }}</option>
            </select>
          </div>
        </div>
      </div>
      <slot name="paginationColumns"></slot>
    </div>
    <!-- Display the pagination error, if any -->
    <ShowErrorField error="paginatedGetRequest"/>
  </div>
</template>

<style scoped>

</style>