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

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

// Props, data and stores
const props = defineProps({
  hideColumns: {
    type: Array,
    required: false
  },
  isDraggable: {
    type: Boolean,
    required: false
  },
});

const itemEdited = ref({
  id: null
})

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

const visibleHeaders = ref(headers)

const showTypeStore = useShowTypeStore();
const smartBlockStore = useSmartBlockStore()


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

const edit = (item) => {
  if (item === 0) {
    item = baseSmartBlock();
  }
  smartBlockStore.loadSmartBlock(item);
  smartBlockStore.currentSmartBlock.smart_block_type = showTypeStore.currentType;
  itemEdited.value = item;
  console.log(smartBlockStore)
}

const saveItem = (item) => {
  const saved = editItem(item);
  console.log(saved)
  smartBlockStore.updateField({key: 'id', value: saved.id});
  // resetItemEdited()
}

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) => {
  if (confirm) {
    if (!bulk.value) {
      deleteItem(itemEdited.value.id)
    } else {
      itemEdited.value.forEach(el => {
        deleteItem(el.id)
      })
    }
  }
  itemEdited.value = {}
  selected.value = []
  closeDialog()
}

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

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

onBeforeMount(() => {
  if(props.hideColumns != undefined) {
    visibleHeaders.value = headers.filter(el => {
      return !props.hideColumns.includes(el.value)
    });
  }
})

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

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

</script>

<template>
  <div>
    <h1>Blocchi dinamici {{ (showTypeStore.type === 'spot') ? 'pubblicitari' : '' }}</h1>
    <SmartBlockEditor
        v-if="itemEdited.id !== null && !dialog.open"
        :item="smartBlockStore.currentSmartBlock"
        @go-back="resetItemEdited"
        @save-item="saveItem"
    />
    <Table
        v-else
        :headers="visibleHeaders"
        v-model:selected="selected"
        v-model:search="search"
        :list-data="listData"
        :items="items"
        :loading="loading"
        :get-items="getItems"
        :actions="true"
        :show-select="true"
        :is-draggable="isDraggable"
        @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 un nuovo blocco dinamico
        </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>
  </div>
</template>

<style scoped>

</style>