<template>
  <div>
    <div class="previewinfo">Dies ist eine Vorschau.</div>
    <h1>{{ title }}</h1>
    <RenderContentComponent :content="content" />
  </div>
</template>

<script>
import { computed, watchEffect } from 'vue';
import { useStore } from 'vuex';
import RenderContentComponent from '@/components/RenderContentComponent.vue';

export default {
  name: 'PagePreview',
  components: {
    RenderContentComponent
  },
  setup() {
    const store = useStore();
    const content = computed(() => store.state.pageContent);
    const selectedPage = computed(() => store.state.selectedPage);
    const menuData = computed(() => store.state.menuData);
    const title = computed(() => store.state.pageTitle);

    const setTitle = (link) => {
      const findTitle = (menuItems, link) => {
        for (const item of menuItems) {
          if (item.link === link) {
            return item.pageTitle || item.name;
          }
          if (item.submenu && item.submenu.length > 0) {
            const found = findTitle(item.submenu, link);
            if (found) {
              return found;
            }
          }
        }
        return '';
      };
      store.dispatch('setPageTitle', findTitle(menuData.value, link));
    };

    watchEffect(() => {
      setTitle(selectedPage.value);
    });

    return {
      content,
      title
    };
  }
};
</script>

<style scoped>
.previewinfo {
  background-color: black;
  color: #d00000;
  position: absolute;
  top: 93px;
  left: 0;
  padding: 2px 10px;
  font-weight: bold;
}
</style>
