<template>
  <div class="destination-edit-modal-container">
    <h3 class="sub-header">Edit destination</h3>
    <div class="destination-edit-container">
      <tab-container :tabs="tabsConfig" class="tab-container">
      </tab-container >
      <div class="destination-edit-actions">
        <basic-button variant="primary" :show-icon="false" @click="close('accept')">OK</basic-button>
        <basic-button variant="secondary" :show-icon="false" @click="close('discard')">Cancel</basic-button>
      </div>
    </div>
  </div>
</template>

<script>
import Tab from "@/components/UI/Tab.vue";
import TabContainer from "@/components/UI/TabContainer.vue";
import DestinationEditRoutes from "@/components/layout/edit/destination/DestinationEditRoutes.vue";
import DestinationEditHandlingCost from "@/components/layout/edit/destination/DestinationEditHandlingCost.vue";
import {markRaw} from "vue";
import BasicButton from "@/components/UI/BasicButton.vue";

export default {
  name: "DestinationEdit",
  components: {BasicButton, TabContainer, Tab},
  emits: ['accept', 'discard'],
  data() {
    return {
      currentTab: null,
      tabsConfig: [
        {
          title: 'Routes',
          component: markRaw(DestinationEditRoutes),
        },
        {
          title: 'Handling & Repackaging',
          component: markRaw(DestinationEditHandlingCost),
        }
      ]
    }
  },
  methods: {
    close(action) {
      this.$emit(action);
    }
  }
}
</script>

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

.destination-edit-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical: allows flex child to shrink below content size */
}



.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; /* Critical: allows flex child to shrink below content size */
}

.destination-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
  flex-shrink: 0; /* Prevent buttons from shrinking */
}

.sub-header {
  flex-shrink: 0; /* Prevent header from shrinking */
}
</style>