<script setup lang="ts">
import {playlist_page} from "@/composables/content/playlist_page.ts";
import Table from "@/components/content/partials/Table.vue";
import PlaylistEditor from "@/components/content/partials/PlaylistEditor.vue";
import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
import {onBeforeMount, onMounted, type PropType, reactive, ref, watch} from "vue";
import {usePlaylistStore} from "@/stores/playlist.store.ts";
import {baseSmartBlock} from "@models/smartblock/smartblock.ts";
import {basePlaylist} from "@models/playlist/playlist.ts";
import {useShowTypeStore} from "@stores/showType.store.ts";

const playlistStore = usePlaylistStore();

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

// Props, data, stores
const itemEdited = ref({
  id: null
});
const bulk = ref(false)
const dialog = reactive({
  open: false,
  type: '',
  title: '',
  text: ''
})
const showTypeStore = useShowTypeStore();

// Funcs
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)
  if (item === 0) {
    item = basePlaylist();
  }
  playlistStore.loadPlaylist(item);
  playlistStore.currentPlaylist.playlist_type = showTypeStore.currentType;
  itemEdited.value = item;
}

const save = (item) => {5
  if (item.name === '') {
    //Check required fields
    console.log('error!')
  }
  const saved = editItem(item)
  console.log(saved)
  playlistStore.updateField({key: 'id', value: saved.id});
}

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
  resetItemEdited()
}

const updateSearch = (text) => {
  search.value = text
}

const resetItemEdited = () => {
  itemEdited.value = {
    id: null,
  }
}

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

<template>
  <PlaylistEditor
      v-if="itemEdited.id !== null && !dialog.open"
      :item="itemEdited"
      @go-back="resetItemEdited"
      @save-item="save"
  />
  <Table
      v-else
      :headers="headers"
      v-model:selected="selected"
      v-model:search="search"
      :list-data="listData"
      :items="items"
      :loading="loading"
      :get-items="getItems"
      :actions="true"
      :show-select="true"
      @update-table="getItems"
      @update-search="updateSearch"
      @delete-item="cancel"
      @edit-item="edit"
  >
    <template v-slot:header-buttons>
      <v-btn color="primary" @click="edit(0)">
        Crea una nuova Playlist
      </v-btn>
    </template>
    <template v-slot:dialog>
      <v-dialog v-model="dialog.open">
        <ConfirmDelete
            v-if="dialog.type === 'delete'"
            :title="dialog.title"
            :text="dialog.text"
            :bulk="bulk"
            @confirm="confirmDelete"
            @after-leave="closeDialog"
        />
      </v-dialog>
    </template>
  </Table>
</template>

<style scoped>

</style>