<template>
    <div>
      <component :is="dynamicComponent" v-bind="componentProps"></component>
    </div>
  </template>
  
  <script>
  import { createApp, h } from 'vue';
  import WorshipRender from './WorshipRender.vue';
  
  export default {
    name: 'RenderContentComponent',
    props: {
      content: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        dynamicComponent: null,
        componentProps: {}
      };
    },
    watch: {
      content: {
        immediate: true,
        handler(newContent) {
          this.renderContent(newContent);
        }
      }
    },
    methods: {
      renderContent(content) {
        const worshipsPattern = /{{ worshipslist:(.*?) }}/g;
        content.replace(worshipsPattern, (match, config) => {
          const props = this.parseConfig(config);
          this.dynamicComponent = WorshipRender;
          this.componentProps = props;
          return '<div id="worship-render-placeholder"></div>';
        });
        this.$nextTick(() => {
          if (this.dynamicComponent) {
            const placeholder = document.getElementById('worship-render-placeholder');
            if (placeholder) {
              const app = createApp({
                render() {
                  return h(this.dynamicComponent, this.componentProps);
                }
              });
              app.mount(placeholder);
            }
          }
        });
      },
      parseConfig(configString) {
        const config = {};
        const configArray = configString.split(',');
        configArray.forEach(item => {
          const [key, value] = item.split('=');
          if (key && value !== undefined) {
            config[key.trim()] = isNaN(value) ? value.trim() : Number(value);
          }
        });
        return config;
      }
    }
  };
  </script>
  
  <style scoped>
  /* Add styles if needed */
  </style>
  