<script setup lang="ts">
import {computed, ref} from "vue";
import draggable from "vuedraggable";
draggable.compatConfig = { MODE: 3 };
import DataTableRowHandler from "@/components/content/partials/table/DataTableRowHandler.vue";

const emit = defineEmits([
    'update:search',
    'update:selected',
    'updateTable',
    'deleteItems',
    'editItem',
    'cancelItem'
])

const props = defineProps({
  headers: Array,
  listData: Object,
  items: Array,
  selected: Array,
  loading: Boolean,
  search: String,
  itemValue: String,
  showSelect: Boolean,
  actions: Boolean,
  isDraggable: {
    type: Boolean,
    default: false
  },
})

const draggableItems = ref(props.items)

const searchValue = computed({
  get() {
    return props.search
  },
  set(value) {
    console.log(value)
    emit('update:search', value)
  }
})

const selectedValues = computed({
  get() {
    return props.selected
  },
  set(values) {
    console.log(props.selected, values)
    emit('update:selected', values)
  }
})

const update = (page_info) => {
  console.log(page_info)
  emit('updateTable', page_info)
}

const test = (ev) => {
  console.log(ev)
}
</script>

<template>
  <div>
    <v-data-table-server
        :headers="headers"
        v-model="selectedValues"
        v-model:items-per-page="listData.itemsPerPage"
        :items="items"
        :items-length="listData.total_items"
        loading-text="Loading..."
        :loading="loading"
        @update:options="update"
        :item-value="itemValue"
        disable-sort
        return-object
        :show-select="showSelect"
        :hide-default-body="isDraggable"
    >
      <template v-slot:top>
        <v-toolbar flat>
          <v-text-field
              v-model="searchValue"
              class="ma-2 search"
              density="compact"
              placeholder="Cerca"
              hide-details
          ></v-text-field>
          <v-divider />
          <slot name="header-buttons"></slot>
          <v-btn color="primary">
            <v-icon
                class="me-2"
                size="small"
                :disabled="selectedValues.length === 0"
                @click="$emit('deleteItem', selected)"
            >
              mdi-delete
            </v-icon>
          </v-btn>
        </v-toolbar>
        <slot name="dialog"></slot>
      </template>

      <template v-if="isDraggable" #tbody="props">
        <draggable
            :list="props.items"
            item-key="id"
            tag="tbody"
            :group="{ name: 'tracklist', pull: 'clone', push: false }"
        >
          <template #item="{ element }">
            <tr class="v-data-table__tr v-data-table__tr--clickable">
              <td v-for="header in headers" class="v-data-table__td v-data-table-column--align-start">
                {{ element[header.value] }}
              </td>
            </tr>
          </template>
        </draggable>
      </template>

      <template v-slot:item.artwork="{ item }">
        <div v-if="item.artwork != ''" v-html="`<img src='/${item.artwork}.jpg' />`"></div>
      </template>

      <template v-if="actions" v-slot:item.actions="{ item }">
        <v-icon
            class="me-2"
            size="small"
            @click="$emit('editItem', item)"
        >
          mdi-pencil
        </v-icon>
        <v-icon
            size="small"
            @click="$emit('deleteItem', item)"
        >
          mdi-delete
        </v-icon>
      </template>
    </v-data-table-server>
  </div>
</template>

<style scoped>
.search {
  min-width:250px;
}
</style>