<template>

  <div class="error-modal-container">
    <div class="trace-view-header">
      <h3 class="sub-header"> Error Details
      </h3>
      <icon-button icon="x" @click="$emit('close')"></icon-button>
    </div>
    <div class="trace-view-body">
      <tab-container :tabs="tabsError" class="tab-container" @tab-changed="handleTabChange">
      </tab-container>

    </div>
  </div>


</template>

<script>

import TabContainer from "@/components/UI/TabContainer.vue";
import {markRaw} from "vue";
import ErrorModalTraceView from "@/components/layout/error/ErrorModalTraceView.vue";
import IconButton from "@/components/UI/IconButton.vue";
import ErrorModalOverview from "@/components/layout/error/ErrorModalOverview.vue";
import ErrorModalPiniaStore from "@/components/layout/error/ErrorModalPiniaStore.vue";
import ErrorModalRequest from "@/components/layout/error/ErrorModalRequest.vue";

export default {
  name: "ErrorModal",
  components: {IconButton, TabContainer},
  emits: ["close"],
  props: {
    error: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleTabChange(eventData) {
      const {_, tab} = eventData;
      this.tabsError.forEach(t => t.props.isSelected = t.title === tab.title);
    }
  },
  computed: {
    tabsError() {
      const tabs = [];

      tabs.push({
        title: 'Overview',
        component: markRaw(ErrorModalOverview),
        props: {isSelected: false, error: this.error},
      });

      if (this.error.request)
        tabs.push({
          title: 'API request',
          component: markRaw(ErrorModalRequest),
          props: {isSelected: false, error: this.error},
        });

      if (this.error.trace)
        tabs.push({
          title: 'Stack trace',
          component: markRaw(ErrorModalTraceView),
          props: {isSelected: false, error: this.error},
        });


      if (this.error.pinia)
        tabs.push({
          title: 'Frontend storage',
          component: markRaw(ErrorModalPiniaStore),
          props: {isSelected: false, error: this.error},
        });


      return tabs;
    }
  },
}
</script>

<style scoped>

.error-modal-container {
  height: 90vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Verhindert Overflow */
}

.trace-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* Header soll nicht schrumpfen */
  padding-bottom: 1.6rem; /* Optional: etwas Abstand */
}

.trace-view-body {
  flex: 1; /* Nimmt den restlichen Platz ein */
  min-height: 0; /* Wichtig für Flexbox-Scrolling */
  overflow: hidden; /* Container selbst soll nicht scrollen */
}

.tab-container {
  height: 100%; /* Füllt die trace-view-body aus */
}

</style>