<template>
  <div>
    <slot name="topbar"> </slot>
    <div class="d-inline-flex">
      <slot name="sidebar">test</slot>
      <Suspense>
        <template #default>
          <component :is="activePageComponent" v-bind="currentProps"></component>
        </template>
        <template #fallback>
          <p>Lade Seite...</p>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
import { useUiStore } from "../store/uiStore.js";

export default {
  name: "DevelopmentLayout",
  // Verwendete Komponenten
  components: {},
  // Props für die Komponente
  props: {},

  // Daten der Komponente
  data() {
    return { uiStore: useUiStore() };
  },

  // Computed Properties
  computed: {
    activePageComponent() {
      const components = {
        Dashboard: defineAsyncComponent(() => import("@/pages/DevelopmentDashboard.vue")),
        TestComponent: defineAsyncComponent(() => import("@/pages/TestComponent.vue")),
        ProcessOverviewComponent: defineAsyncComponent(() => import("@/pages/ProcessOverviewComponent.vue")),
        FormDesignerLayout: defineAsyncComponent(() => import("@/layouts/FormDesignerLayout.vue")),
      };

      const activeComponent = this.uiStore.openComponents.find((comp) => comp.active);

      return components[activeComponent?.componentName] || components["Dashboard"];
    },
    currentProps() {
      const activeComponent = this.uiStore.openComponents.find((comp) => comp.active);
      return activeComponent?.props || {};
    },
  },

  // Methoden
  methods: {},

  // Lifecycle-Hooks
};
</script>

<style scoped></style>
