<script setup lang="ts">
import axios from "axios";
import {ref, reactive, watch, computed, onMounted} from "vue";
import { archive } from "@/composables/content/archive.js.ts";
import FileUpload from "@/components/content/partials/dialogs/FileUpload.vue";
import FileEdit from "@/components/content/partials/dialogs/FileEdit.vue";
import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";

const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = archive()

const itemEdited = ref({})
const bulk = ref(false)
const dialog = reactive({
  open: false,
  type: '',
  title: '',
  text: ''
})

const openDialog = (type, title = '', text = '', bulk = false) => {
  dialog.open = true
  dialog.type = type
  dialog.title = title
  dialog.text = text
}


const edit = (item) => {
  console.log(item)
  itemEdited.value = item
  openDialog('edit')
}

const saveItem = (item) => {
  const saved = editItem(item)
  closeDialog()
}

const cancel = (item) => {
  bulk.value = Array.isArray(item)
  itemEdited.value = item
  openDialog(
      'delete',
      'Cancella',
      bulk.value ? 'Vuoi cancellare i file selezionati?' : 'Vuoi cancellare il file selezionato?'
  )
}

const confirmDelete = (confirm, bulk) => {
  if (confirm) {
    if (!bulk) {
      deleteItem(itemEdited.value.id)
    } else {
      itemEdited.value.forEach(el => {
        deleteItem(el.id)
      })
    }
  }
  closeDialog()
}

const closeDialog = () => dialog.open = false

watch(search, (newValue, oldValue) => {
  getItems(listData)
})

</script>

<template>
  <div>
    <v-data-table-server
      :headers="headers"
      v-model="selected"
      v-model:items-per-page="listData.itemsPerPage"
      :items="items"
      :items-length="listData.total_items"
      loading-text="Loading..."
      :loading="loading"
      @update:options="getItems"
      item-value="track_title"
      disable-sort
      return-object
      show-select
    >
      <template v-slot:top>
        <v-toolbar flat>
          <v-text-field
              v-model="search"
              class="ma-2 search"
              density="compact"
              placeholder="Cerca"
              hide-details
          ></v-text-field>
          <v-divider />
          <v-btn color="primary" @click="openDialog('upload')">
            Upload
          </v-btn>
          <v-divider />
          <v-btn color="primary">
            <v-icon
                class="me-2"
                size="small"
                :disabled="selected.length === 0"
                @click="cancel(selected)"
                >
              mdi-delete
            </v-icon>
          </v-btn>
        </v-toolbar>
        <v-dialog v-model="dialog.open">
          <FileUpload
              v-if="dialog.type === 'upload'"
              @close-dialog="closeDialog"
          />
          <FileEdit
              v-else-if="dialog.type === 'edit'"
              :item="itemEdited"
              @edit-item="saveItem"
          />
          <ConfirmDelete
              v-else-if="dialog.type === 'delete'"
              :title="dialog.title"
              :text="dialog.text"
              :bulk="bulk"
              @confirm="confirmDelete"
          />
        </v-dialog>
      </template>

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

      <template v-slot:item.actions="{ item }">
        <v-icon
            class="me-2"
            size="small"
            @click="edit(item)"
        >
          mdi-pencil
        </v-icon>
        <v-icon
            size="small"
            @click="cancel(item)"
        >
          mdi-delete
        </v-icon>
      </template>
    </v-data-table-server>
  </div>
</template>

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