<script setup lang="ts">
import axios from "axios";
import {useAuthStore} from "@/stores/auth.store.ts";
import {ref, onMounted, reactive, computed} from "vue";
const auth = useAuthStore()
const items = ref([])

const listData = reactive({
  'per_page': 5,
  'first_page': null,
  'last_page': null,
  'total_items': 0,
  'current_page': 1,
})

const active_columns = reactive({
  'track_title': 'Track Title',
  'artist_name': 'Artist',
  'genre': 'Genre',
  'track_type': 'Track Type',
  'length': 'Length',
  'mtime': 'Uploaded'
})

/**
 * ToDo: understand why per_page and other filters doesn't work
 * @param page_info created by v-data-table-server on update
 */
const getItems = (page_info) => {
  console.log(page_info);
  return axios.get(`/file`, {
    params: {
      page: page_info.page,
      per_page: page_info.per_page,
    }
  }).then((response) => {
    console.log(response)
    listData.per_page     = response.data.per_page;
    listData.first_page   = response.data.from;
    listData.last_page    = response.data.last_page;
    listData.current_page = response.data.current_page;
    listData.total_items  = response.data.total;

    items.value = response.data.data.map((el) => {
      Object.keys(el).forEach((key) => {
        if (Object.keys(active_columns).includes(key)) {
          el[active_columns[key]] = el[key];
        }
        delete el[key];
      })
      return el;
    });
    console.log(listData);
  }).catch((error) => {
    console.log("Error: "+error);
  })
}
</script>

<template>
  <div>
    <v-data-table-server
      v-model:items-per-page="listData.per_page"
      :items="items"
      :items-length="listData.total_items"
      loading-text="Loading..."
      :loading="items.length === 0"
      @update:options="getItems"
      disable-sort
    >
    </v-data-table-server>
  </div>
</template>

<style scoped>
  .v-data-table {
    width:100%;
  }
</style>