import { defineComponent, onMounted, ref, watch } from "vue";
import draggable from 'vuedraggable'

import { tools } from '@tools'

import { useGlobalStore } from '@src/store/globalStore'

import { costanti } from '@costanti'
import { IAuthor, ICatProd } from "app/src/model";

export default defineComponent({
  name: "CProductTable",
  components: {
    draggable,
  },
  props: {
    lista_prodotti: {
      type: Array,
      required: true,
    },
  },
  emits: ["update:lista_prodotti"],
  setup(props, { emit }) {
    // Copia locale della lista_prodotti per manipolazione interna
    const internalProducts = ref([...props.lista_prodotti]);

    const globalStore = useGlobalStore()

    async function mounted() {

    }

    // Aggiorna la copia locale quando il prop cambia
    watch(
      () => props.lista_prodotti,
      (newVal) => {
        internalProducts.value = [...newVal];
      }
    );

    // Colonne della tabella
    const allColumns = [
      { name: "drag", label: "", field: "", align: "left", style: "width: 50px" },
      { name: "image", label: "Immagine", field: "image", align: "center" },
      { name: "title", label: "Titolo", field: "title", align: "left" },
      { name: "author", label: "Autore", field: "author", align: "left" },
      { name: "topic", label: "Argomento", field: "topic", align: "left" },
      { name: "isbn", label: "ISBN", field: "isbn", align: "left" },
      { name: "actions", label: "Azioni", field: "", align: "center" },
    ];

    const selectedColumns = ref(
      tools.getCookie("selColCat")
        ? JSON.parse(tools.getCookie("selColCat"))
        : ["drag", "image", "name", "authors", "catprods", "isbn", "actions"] // Valori di default
    )

    // 3. Funzione per verificare se una colonna è visibile (isColumnVisible)
    const isColumnVisible = (column) => {
      return selectedColumns.value.includes(column);
    }

    // Funzione per eliminare un prodotto
    const removeProduct = (product) => {
      internalProducts.value = internalProducts.value.filter((p: any) => p._id !== product._id);
      emit("update:lista_prodotti", internalProducts.value); // Notifica il parent del cambiamento
    }

    // 8. Salvataggio delle colonne selezionate in un cookie
    const saveSelectedColumns = () => {
      tools.setCookie("selColCat", JSON.stringify(selectedColumns.value));
    };

    // 9. Watcher per salvare automaticamente le preferenze quando cambiano
    watch(() => selectedColumns.value, () => {
      saveSelectedColumns();
    });

    // Funzione chiamata alla fine del drag-and-drop
    const onDragEnd = () => {
      // console.log("Nuovo ordine:", internalProducts.value);
      emit("update:lista_prodotti", internalProducts.value); // Notifica il parent del cambiamento
    }

    function formatAuthors(authors: IAuthor[] | undefined | null): string {
      if (!authors || !Array.isArray(authors)) {
        return ""; // Restituisci una stringa vuota se authors non è un array valido
      }

      // Estrai il nome e il cognome di ogni autore e uniscili con ', '
      return authors
        .map((author) => `${author.name ?? ""} ${author.surname ?? ""}`.trim())
        .filter((name) => name.length > 0) // Filtra eventuali nomi vuoti
        .join(", ");
    }

    function formatCatProds(catprods: ICatProd[] | undefined | null): string {
      if (!catprods || !Array.isArray(catprods)) {
          return "";
      }

      // Estrai il nome e il cognome di ogni autore e uniscili con ', '
      return catprods
        .map((catprod) => `${catprod.name ?? ""}`.trim())
        .filter((name) => name.length > 0) // Filtra eventuali nomi vuoti
        .join(", ");
    }

    // Caricamento delle preferenze al mount del componente
    onMounted(() => {
      const savedColumns = tools.getCookie("selColCat");
      if (savedColumns) {
        selectedColumns.value = JSON.parse(savedColumns);
      }
    });

    return {
      allColumns,
      selectedColumns,
      isColumnVisible,
      internalProducts,
      formatAuthors,
      formatCatProds,
      removeProduct,
      tools,
      globalStore,
      costanti,
      onDragEnd,
    }
  },
})