<script setup lang="ts">
import {onActivated, onBeforeMount, onMounted, type PropType, reactive, ref, watch} from "vue";
import Table from "@partials/Table.vue";
import ConfirmDelete from "@partials/dialogs/ConfirmDelete.vue";
import {show_page} from "@/composables/content/show/show_page.ts";
import ShowForm from "@partials/show/ShowForm.vue";
import {baseShow, type Show} from "@models/show/show";
import {useShowTypeStore} from "@stores/showType.store.ts";

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

const showTypeStore = useShowTypeStore();
const showCreateEditMode = ref(false);
let showSelected = ref<Number | null>(null);

const bulk = ref({
  state: false,
  items: [] as Show[],
})

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

// Funcs
const openDialog = (type, title: string = '', text: string = '') => {
  dialog.open = true
  dialog.type = type
  dialog.title = title
  dialog.text = text
}

const edit = (showSelectedFromUser) => {
  showSelected.value = showSelectedFromUser.id
  showCreateEditMode.value = true
}

const create = () => {
  showSelected.value = null
  showCreateEditMode.value = true
}

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

const cancel = (item) => {
  let deleteMessage = `Vuoi cancellare lo ${showTypeStore.currentType} selezionato?`
  if (bulk.value.state) deleteMessage = `Vuoi cancellare gli ${showTypeStore.currentType} selezionati?`
  bulk.value.items = item
  showSelected.value = item?.id
  openDialog(
      'delete',
      'Cancella',
      deleteMessage
  )
}

const confirmDelete = (confirm) => {
  if (confirm) {
    const showId = showSelected.value == 0 ? null : showSelected.value;
    deleteItem(showId)
  }
  closeDialog()
}

const closeDialog = () => {
  dialog.open = false
  resetItemEdited()
}

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

const resetItemEdited = () => {
  showSelected.value = null
}

const goBack = () => {
  showCreateEditMode.value = false
  showSelected.value = null
}

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

<template>
  <div>
    <h1>
      {{ (showTypeStore.currentType === 'show') ? 'Trasmissioni' : 'Blocchi pubblicitari' }}
    </h1>
    <ShowForm v-if="showCreateEditMode" :showId="showSelected" :showType="showTypeStore.currentType" @go-back="goBack"/>
    <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="create">
          <span> {{ (showTypeStore.currentType === 'show') ? 'Crea una nuova trasmissione' : 'Crea un nuovo blocco pubblicitario' }} </span>
        </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.state"
              @confirm="confirmDelete"
              @after-leave="closeDialog"
          />
        </v-dialog>
      </template>
    </Table>
  </div>
</template>