<template>
  <div>
    <!-- Selezione Colonne -->
    <div class="q-mb-md">
      <q-select
        v-model="selectedColumns"
        :options="allColumns"
        label="Colonne da visualizzare"
        multiple
        emit-value
        map-options
        filled
        style="max-width: 400px"
      />
    </div>

    <!-- Tabella Prodotti -->
    <table>
      <!-- Intestazioni (Thead) -->
      <thead>
        <tr>
          <th v-if="isColumnVisible('drag')">Drag</th>
          <th v-if="isColumnVisible('image')">Immagine</th>
          <th v-if="isColumnVisible('name')">Nome</th>
          <th v-if="isColumnVisible('authors')">Autore</th>
          <th v-if="isColumnVisible('catprods')">Argomento</th>
          <th v-if="isColumnVisible('isbn')">ISBN</th>
          <th v-if="isColumnVisible('actions')">Azioni</th>
        </tr>
      </thead>
      <!-- Corpo della Tabella (Tbody) -->
      <draggable
        v-model="internalProducts"
        tag="tbody"
        handle=".drag-handle"
        item-key="_id"
        @end="onDragEnd"
      >
        <template #item="{ element }">
          <tr :key="element._id">
            <!-- Icona Drag Handle -->
            <td v-if="isColumnVisible('drag')" class="drag-handle">
              <q-icon name="drag_handle" size="32px" color="primary" />
            </td>

            <!-- Immagine Piccola -->
            <td v-if="isColumnVisible('image')">
              <q-img
                :src="
                  element.productInfo?.imagefile
                    ? tools.getFullFileNameByImageFile('productInfos', element.productInfo?.imagefile)
                    : element.productInfo?.image_link
                "
                style="width: 50px; height: 50px"
                class="rounded-borders"
              />
            </td>

            <!-- Titolo -->
            <td v-if="isColumnVisible('name')">{{ element.productInfo?.name }}</td>

            <!-- Autore -->
            <td v-if="isColumnVisible('authors')">{{ formatAuthors(element.productInfo?.authors) }}</td>

            <!-- Argomento -->
            <td v-if="isColumnVisible('catprods')">{{ formatCatProds(element.productInfo?.catprods) }}</td>

            <!-- ISBN -->
            <td v-if="isColumnVisible('isbn')">{{ element.isbn }}</td>

            <!-- Azioni -->
            <td v-if="isColumnVisible('actions')">
              <q-btn-dropdown label="Azioni" color="primary" flat>
                <q-list>
                  <q-item clickable v-close-popup @click="removeProduct(element)">
                    <q-item-section>
                      <q-item-label>Elimina</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </td>
          </tr>
        </template>
      </draggable>
    </table>
  </div>
</template>


<script lang="ts" src="./CProductTable.ts"></script>
<style lang="scss" scoped>
@import './CProductTable.scss';
</style>
