<template>
  <div class="dump-container">

    <table-view :columns="columns" :data-source="fetch" :page-size="pageSize" :page="pagination.page"
                :page-count="pagination.pageCount" :total-count="pagination.totalCount" @row-click="showDump"
                :mouse-over="true"></table-view>


    <modal :state="showModal">
      <div class="single-dump-container">
        <div class="button-container">
          <basic-button @click="showModal = false" :show-icon="false" variant="secondary">Close</basic-button>
          <basic-button variant="secondary" :show-icon="false" @click="expand = !expand"> {{ expand === true ? 'Collapse all items' : 'Expand all items' }}</basic-button>
        </div>
        <json-tree-viewer :data="dump" :all-expanded="expand"></json-tree-viewer>
      </div>
    </modal>

  </div>
</template>

<script>

import TableView from "@/components/UI/TableView.vue";
import performRequest from "@/backend.js";
import {config} from "@/config.js";
import Modal from "@/components/UI/Modal.vue";
import JsonTreeViewer from "@/components/UI/JsonTreeViewer.vue";
import BasicButton from "@/components/UI/BasicButton.vue";

export default {
  name: "CalculationDumps",
  components: {BasicButton, JsonTreeViewer, Modal, TableView},
  methods: {
    showDump(dump) {
      this.dump = dump;
      this.showModal = true;
    },
    async fetch(query) {

      const params = new URLSearchParams();
      if (query?.searchTerm && query.searchTerm !== '')
        params.append('filter', query.searchTerm);
      if (query?.periodId)
        params.append('valid', query.periodId);

      if (query?.page)
        params.append('page', query.page);

      if (query?.pageSize)
        params.append('limit', query.pageSize);

      const resp = await performRequest(null, "GET", `${config.backendUrl}/dumps/dump/${params.size === 0 ? '' : '?'}${params.toString()}`, null);
      this.dump = resp.data;
      this.pagination = {
        page: parseInt(resp.headers.get('X-Current-Page')),
        pageCount: parseInt(resp.headers.get('X-Page-Count')),
        totalCount: parseInt(resp.headers.get('X-Total-Count'))
      };

      return this.dump;

    }
  },
  data() {
    return {
      showModal: false,
      dump: null,
      expand: false,

      pageSize: 20,
      pagination: {page: 1, pageCount: 1, totalCount: 1},
      columns: [
        {
          key: 'id',
          label: 'ID',
        },
        {
          key: 'calculation_date',
          label: 'Calculation date',
        },
        {
          key: 'job_state',
          label: 'State',
          badgeResolver: (value) => {
            if (value === 'VALID')
              return [{text: value, variant: "primary"}];
            if (value === 'EXCEPTION')
              return [{text: value, variant: "exception"}]
            return [{text: value, variant: "secondary"}]
          }
        },
        {
          key: 'user_id',
          label: 'User ID',
        },
        {
          key: 'premise.material.part_number',
          label: 'Material',
        },
        {
          key: 'premise.supplier.name',
          label: 'Supplier',
        },
        {
          key: 'premise.destinations',
          label: 'Destinations',
          formatter: (value) => {
            return value.map(v => v.destination_node.name).join(', ');
          }
        },
      ],
    }
  }
}
</script>


<style scoped>

.button-container {
  display: flex;
  gap: 1rem;
}

.dump-container {
  padding: 2.4rem;
}

.single-dump-container {
  height: 80vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.single-dump-container > :first-child {
  flex-shrink: 0; /* Button behält seine Größe */
}

.single-dump-container > :last-child {
  flex: 1;
  min-height: 0; /* Wichtig für Flex-Children mit overflow */
  overflow-y: auto;
}

</style>