<template>
  <div class="destination-edit-container">
    <tab-container :default-tab="defaultTab" :tabs="tabsConfig" class="tab-container">
    </tab-container>
  </div>

</template>

<script>

import TabContainer from "@/components/UI/TabContainer.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import {markRaw} from "vue";
import DestinationMassQuantity from "@/components/layout/edit/destination/mass/DestinationMassQuantity.vue";
import DestinationMassRoute from "@/components/layout/edit/destination/mass/DestinationMassRoute.vue";
import DestinationMassHandlingCost from "@/components/layout/edit/destination/mass/DestinationMassHandlingCost.vue";
import {mapStores} from "pinia";
import {useNotificationStore} from "@/store/notification.js";

export default {
  name: "DestinationMassEdit",
  components: {BasicButton, TabContainer},
  props: {
    premiseIds: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentTab: null,
      isLoading: [false, false, false],
    }
  },
  created() {
    this.updateSpinner();
  },
  methods: {
    handleTabLoadingQuantity(loading) {
      this.isLoading[0] = loading;
      this.updateSpinner();
    },
    handleTabLoadingHandling(loading) {
      this.isLoading[1] = loading;
      this.updateSpinner();
    },
    handleTabLoadingRoutes(loading) {
      this.isLoading[2] = loading;
      this.updateSpinner();
    },
    updateSpinner() {
      if (this.isLoading[0] || this.isLoading[1] || this.isLoading[2]) {
        this.notificationStore.setSpinner("Processing ...");

      }
      else {
        this.notificationStore.clearSpinner();
      }
    }
  },
  computed: {
    ...mapStores(useNotificationStore),
    defaultTab() {
      return this.tabsConfig.indexOf(this.tabsConfig.find(t => t.matchType === this.type)) ?? 0;
    },
    tabsConfig() {
      return [
        {
          title: 'Annual quantity',
          component: markRaw(DestinationMassQuantity),
          props: {premiseIds: this.premiseIds, onLoadingChange: this.handleTabLoadingQuantity},
          matchType: 'amount',

        },
        {
          title: 'Handling & Repackaging',
          component: markRaw(DestinationMassHandlingCost),
          props: {premiseIds: this.premiseIds, onLoadingChange: this.handleTabLoadingHandling},
          matchType: 'handling',

        },
        {
          title: 'Routes',
          component: markRaw(DestinationMassRoute),
          props: {premiseIds: this.premiseIds, onLoadingChange: this.handleTabLoadingRoutes},
          matchType: 'routes',

        },
      ]
    }
  }
}
</script>


<style scoped>
.tab-container {
  flex: 1;
  min-height: 0; /* Critical: allows flex child to shrink below content size */
  display: flex;
  flex-direction: column;
}

.destination-edit-container {
  display: flex;
  flex-direction: column;

  min-width: 100rem;
  width: 90vw;
  height: 70vh; /* Feste Höhe statt max-height */
  min-height: 50rem; /* Mindesthöhe für kleine Bildschirme */
  max-height: 90rem; /* Maximale Höhe für große Bildschirme */
}


.destination-edit-modal-container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1 0 min(60vw, 120rem);
  height: min(60vh, 120rem);
  min-height: 0;
}

.destination-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
  flex-shrink: 0;
}


</style>