<script setup>
import {getDataColumns, getDataRows, progress, getResponse} from "@/components/forms/other/MassDataInserter.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref, computed, defineEmits, defineProps } from 'vue';

const rowDetailsVisible = ref([]);
const toggleDetails = (row) => {
  const index = rowDetailsVisible.value.indexOf(row);
  if (index > -1) {
    rowDetailsVisible.value.splice(index, 1);
  } else {
    rowDetailsVisible.value.push(row);
  }
};
const isRowDetailsVisible = (row) => {
  return rowDetailsVisible.value.includes(row);
};
</script>

<template>
  <table class="table is-striped is-hoverable is-fullwidth">
    <thead>
      <tr>
        <!-- Add the column headers -->
        <template v-for="column in getDataColumns()" :key="column.id">
          <th>{{ column.getLabel() }}</th>
        </template>
        <!-- Status processing -->
        <template v-if="progress.total > 0">
          <th>{{ SessionUser.objects.global.language.status }}</th>
        </template>
      </tr>
    </thead>
    <tbody>
    <template v-for="row in getDataRows()" :key="row.id">
      <tr>
        <template v-for="column in getDataColumns()" :key="column.id">
          <td
              class="has-text-left"
          >{{ row.getValue(column.id) }}</td>
        </template>
        <!-- Status processing -->
        <template v-if="progress.total > 0">
          <td
              class="has-text-left"
              @click="toggleDetails(row)"
          >
            <span v-if="progress.pending.includes(row)" class="tag is-light is-clickable">{{ SessionUser.objects.global.language.waiting }}</span>
            <span v-if="progress.processing.includes(row)" class="tag is-info is-clickable">{{ SessionUser.objects.global.language.in_progress }}</span>
            <span v-if="progress.completed.includes(row)" class="tag is-success is-clickable">{{ SessionUser.objects.global.language.succeeded }}</span>
            <span v-if="progress.failed.includes(row)" class="tag is-danger is-clickable">{{ SessionUser.objects.global.language.failed }}</span>
          </td>
        </template>
      </tr>
      <!-- Details row -->
      <tr v-if="isRowDetailsVisible(row)" :key="row.id + '-details'">
        <td colspan="100%">
          <div class="notification is-light has-text-left">
            <strong>{{ SessionUser.objects.global.language.error }}</strong>
            <pre v-if="progress.failed.includes(row)">{{ getResponse(row).error.response.data.data.message }}</pre>
            <pre v-else-if="progress.completed.includes(row)">{{ getResponse(row).data.data }}</pre>
            <pre v-else>{{ SessionUser.objects.global.language.pending }}</pre>
          </div>
        </td>
      </tr>
    </template>
    </tbody>
    <tfoot>
      <tr>
        <!-- Add the total row count -->
        <td
            colspan="100%"
            class="has-text-left"
        >
          {{ getDataRows().length }} {{ SessionUser.objects.global.language.rows.toLowerCase() }}
        </td>
      </tr>
    </tfoot>
  </table>
</template>

<style scoped>

</style>