<template>
  <div class="content-render" v-html="parsedContent"></div>
</template>

<script>
import { createApp, h, ref, watch } from 'vue';
import WorshipRender from './WorshipRender.vue';
import ImageRender from './ImageRender.vue';
import EventRender from './EventRender.vue';
import ContactRender from './ContactRender.vue'; // Importiere die neue Komponente
import InstitutionRender from './InstitutionRender.vue'; // Importiere die neue Komponente
import DownloadLink from './DownloadLink.vue';

export default {
  name: 'RenderContentComponent',
  props: {
    content: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const parsedContent = ref('');

    const renderContent = (content) => {
      let result = renderWorship(content);
      result = renderImage(result);
      result = renderDownload(result);
      result = renderEvent(result);
      result = renderContact(result); 
      result = renderInstitution(result);
      return result;
    };

    const renderWorship = (content) => {
      const worshipsPattern = /{{ worshipslist:(.*?) }}/g;
      let result = content;
      result = result.replace(worshipsPattern, (match, config) => {
        const placeholderId = `worship-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
        setTimeout(() => {
          const placeholder = document.getElementById(placeholderId);
          if (placeholder) {
            const app = createApp({ 
              render() {
                return h(WorshipRender, {config: JSON.parse(config) });
              },
            });
            app.mount(placeholder);
          }
        }, 0);
        return `<div id="${placeholderId}"></div>`;
      });
      return result;
    };

    const renderImage = (content) => {
      const imagePattern = /{{ image:(.*?) }}/g;
      let result = content;
      result = result.replace(imagePattern, (match, config) => {
        const placeholderId = `image-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
        setTimeout(() => {
          const placeholder = document.getElementById(placeholderId);
          if (placeholder) {
            const app = createApp({
              render() {
                return h(ImageRender, { id: config });
              },
            });
            app.mount(placeholder);
          }
        }, 0);
        return `<span id="${placeholderId}"></span>`;
      });
      return result;
    };

    const renderDownload = (content) => {
      const downloadPattern = /{{ download:(.*?) }}/g;
      let result = content;
      result = result.replace(downloadPattern, (match, config) => {
        const placeholderId = `image-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
        setTimeout(() => {
          const placeholder = document.getElementById(placeholderId);
          if (placeholder) {
            const app = createApp({
              render() {
                return h(DownloadLink, { hash: config });
              },
            });
            app.mount(placeholder);
          }
        }, 0);
        return `<span id="${placeholderId}"></span>`;
      });
      return result;
    };

    const renderEvent = (content) => {
      const eventsPattern = /{{ events:(.*?) }}/g;
      let result = content;
      result = result.replace(eventsPattern, (match, config) => {
        const placeholderId = `event-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
        setTimeout(() => {
          const placeholder = document.getElementById(placeholderId);
          if (placeholder) {
            const app = createApp({
              render() {
                return h(EventRender, {config: JSON.parse(config) });
              },
            });
            app.mount(placeholder);
          }
        }, 0);
        return `<div id="${placeholderId}"></div>`;
      });
      return result;
    };

    const renderContact = (content) => {
      const contactPattern = /{{ contact:(.*?) }}/g;
      let result = content;
      result = result.replace(contactPattern, (match, config) => {
        const props = parseConfig(config);
        const placeholderId = `contact-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
        setTimeout(() => {
          const placeholder = document.getElementById(placeholderId);
          if (placeholder) {
            const app = createApp({
              render() {
                return h(ContactRender, { config: props });
              },
            });
            app.mount(placeholder);
          }
        }, 0);
        return `<div id="${placeholderId}"></div>`;
      });
      return result;
    };

    const renderInstitution = (content) => {
      const institutionPattern = /{{ institution:(.*?) }}/g;
      let result = content;
      result = result.replace(institutionPattern, (match, config) => {
        const props = parseConfig(config);
        const placeholderId = `institution-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
        setTimeout(() => {
          const placeholder = document.getElementById(placeholderId);
          if (placeholder) {
            const app = createApp({
              render() {
                return h(InstitutionRender, { config: props });
              },
            });
            app.mount(placeholder);
          }
        }, 0);
        return `<div id="${placeholderId}"></div>`;
      });
      return result;
    };

    const parseConfig = (configString) => {
      try {
        const config = JSON.parse(configString);
        return config;
      } catch (error) {
        console.error('Error parsing config:', error);
        console.log(configString);
        return {};
      }
    };

    watch(
      () => props.content,
      (newContent) => {
        parsedContent.value = renderContent(newContent);
      },
      { immediate: true }
    );

    return {
      parsedContent,
    };
  },
};
</script>

<style scoped>
.content-render :deep(ul),
.content-render :deep(ol) {
  margin: 0.2rem 0 0.35rem 0;
  padding-left: 1.05rem;
}

.content-render :deep(li) {
  margin: 0.08rem 0;
  line-height: 1.35;
}

.content-render :deep(ul) {
  list-style: none;
  padding-left: 0;
}

.content-render :deep(ul > li) {
  position: relative;
  padding-left: 1.05rem;
}

.content-render :deep(ul > li)::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.02em;
  color: var(--color-brand-primary-hover);
  font-size: 0.95em;
  line-height: 1;
}

.content-render :deep(ul ul) {
  margin-top: 0.08rem;
  margin-bottom: 0.18rem;
}

.content-render :deep(ul ul > li) {
  padding-left: 0.95rem;
}

.content-render :deep(ul ul > li)::before {
  content: "◦";
  color: var(--color-text-muted);
  font-size: 0.9em;
}

.content-render :deep(ol) {
  list-style-position: outside;
}

.content-render :deep(ol > li)::marker {
  color: var(--color-brand-primary-hover);
  font-weight: 600;
}
</style>
