<template>

  <div class="trace-view-container" :class="trace ? '' : 'trace-view-container--no-trace'">
    <div class="trace-view-header">
      <div class="trace-view-exception">{{ title }} - {{ message }}</div>

    </div>
    <div v-if="trace" class="trace-view">
      <div class="trace-view-exception">{{ exception }}</div>
      <div :class="highlightClasses(traceItem)" v-for="traceItem of trace">{{ fullClassName(traceItem) }} (<span
          class="trace-view-file">{{ fileName(traceItem) }}</span>)
      </div>
    </div>
  </div>
</template>

<script>

import BasicButton from "@/components/UI/BasicButton.vue";
import IconButton from "@/components/UI/IconButton.vue";
import {PhWarning} from "@phosphor-icons/vue";

export default {
  name: "ErrorLogModal",
  components: {PhWarning, IconButton, BasicButton},
  emits: ['close'],
  props: {
    error: {
      type: Object,
      required: true
    }
  },
  computed: {

    trace() {
      return this.error.trace;
    },
    exception() {
      return this.error.code;
    },
    title() {
      return this.error.title;
    },
    code() {
      return this.error.code;
    },
    message() {
      return this.error.message;
    },

  },
  methods: {
    highlightClasses(traceItem) {
      return traceItem.fullPath?.includes('de.avatic.lcc') ? 'highlight-trace-item' : 'trace-item';
    },
    fullClassName(traceItem) {
      return traceItem.fullPath;
    },
    fileName(traceItem) {
      return `${traceItem.file}:${traceItem.line}`;
    },
  }
}
</script>

<style scoped>

@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

.highlight-trace-item {
  color: #002F54;
  background-color: #F2F2F2;
  padding-left: 1.6rem;
}

.trace-item {
  padding-left: 1.6rem;
}

.trace-view {
  overflow: auto;
  font-family: Roboto Mono, monospace;
  font-size: 1.2rem;
  flex: 1;
  padding: 0 1.6rem;
  min-height: 0; /* Wichtig für Flexbox-Scrolling */
}

.trace-view-header {
  font-family: Roboto Mono, monospace;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* Header soll nicht schrumpfen */
}

.trace-view-message {
  font-size: 1.2rem;
}

.trace-view-file {
  font-weight: 500;
  text-decoration: underline;
}

.trace-view-exception {
  /* Dein Styling hier */
}

.trace-view-container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  height: 100%; /* Parent-Höhe ausfüllen */
  width: 100%; /* Parent-Breite ausfüllen */
  overflow: hidden; /* Container selbst soll nicht scrollen */
}

.trace-view-container--no-trace {
  height: auto;
  width: auto;
}

</style>