<script setup lang="ts">
import Table from "@partials/Table.vue";
import {usePodcastStore} from "@/stores/podcast.store.ts";
import {podcast_page} from "@/composables/content/podcast_page.ts";
import {basePodcast} from "@models/podcast/podcast.ts";
import {reactive, ref} from "vue";
import ConfirmDelete from "@partials/dialogs/ConfirmDelete.vue";
import PodcastEditor from "@partials/PodcastEditor.vue";
import SmartBlockEditor from "@partials/SmartBlockEditor.vue";


const podcastStore = usePodcastStore();
podcastStore.loadPodcast(basePodcast());
const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = podcast_page();
const url = ref('');
const itemEdited = ref(basePodcast());
const episodes = ref([]);
const bulk = ref(false);
const dialog = reactive({
  open: false,
  type: '',
  title: '',
  text: ''
});
const dialogLoading = ref(false);

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

const add = () => {
  openDialog(
      'add',
      'Aggiungi podcast',
      'Inserisci l\'url del feed RSS del podcast che vuoi aggiungere.'
  );
}

const confirm = (confirm, bulk) => {
  switch (dialog.type) {
    case 'delete':
      confirmDelete(confirm, bulk);
      break;
    case 'add':
      confirmAdd(confirm);
  }
}

const confirmAdd = async (confirm) => {
  if (confirm) {
    dialogLoading.value = true;
    await axios.get('/rss_podcast_load', {
      params: {
        url: url.value,
      }
    }).then(res => {
      if (res.data.podcast) {
        podcastStore.updateField({key: 'title', value: res.data.podcast.title});
        podcastStore.updateField({key: 'url', value: url});
        podcastStore.currentPodcastEpisodes = res.data.episodes;
      }
      closeDialog();
      dialogLoading.value = false;
      //episodes.value = res.data.episodes;
      openDialog(
          'info',
          'Attenzione',
          'L\'URL inserito non è un feed RSS valido'
      );
    })
  }
}

const edit = (item) => {
  podcastStore.loadPodcast(item);
}

const cancel = (item) => {
  bulk.value = Array.isArray(item);
  itemEdited.value = item;
  openDialog(
      'delete',
      'Cancella',
      bulk.value ? 'Vuoi cancellare i podcast selezionati?' : 'Vuoi cancellare il podcast 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;
  itemEdited.value = basePodcast();
}

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

const resetItemEdited = () => {
  podcastStore.currentPodcast = basePodcast();
}
</script>

<template>
  <div>
    <h1>Podcast</h1>
    <PodcastEditor
      v-if="podcastStore.currentPodcast.url != '' && podcastStore.currentPodcast.url != null"
      @go-back="resetItemEdited"
      />
    <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="add">
          Aggiungi podcast
        </v-btn>
      </template>
      <template v-slot:dialog>
        <v-dialog v-model="dialog.open">
          <ConfirmDelete
              :title="dialog.title"
              :text="dialog.text"
              :bulk="bulk"
              @confirm="confirm"
              @after-leave="closeDialog"
              :loading="dialogLoading"
              :hide_confirm="dialog.type === 'info' ? true : false"
          >
            <VTextField
                label="Feed RSS"
                v-if="dialog.type === 'add'"
                v-model="url"
            />
          </ConfirmDelete>
        </v-dialog>
      </template>
    </Table>
  </div>
</template>

<style scoped>

</style>